jQuery: меню скользит вниз поверх контента, а не толкает контент вниз - PullRequest
Новая
       35

jQuery: меню скользит вниз поверх контента, а не толкает контент вниз

2 голосов
/ 12 августа 2011

В настоящее время это главное меню, которое должно растягиваться на 100%, при щелчке и расширении оно, похоже, просто скользит вниз и толкает остальное содержимое страницы вниз.

Я бы хотел, чтобы меню закрылось, но вместо того, чтобы толкать всю страницу вниз, просто сядьте на верх страницы и разверните вниз, насколько это необходимо. 

$(document).ready(function() {
    // Expand Panel
    $("#open").click(function(){
        $("div#blurbPanel").slideToggle("slow");
    }); 
    // Collapse Panel
    $("#close").click(function(){
        $("div#blurbPanel").slideToggle("slow");
    });     
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     
});

Что я делаю не так?

Ответы [ 2 ]

2 голосов
/ 12 августа 2011

Вы добавляете z-index и свойства положения в меню css. Z-index позволяет HTML знать положение слоя элемента. Чтобы z-index работал правильно, вам нужно указать положение элемента, чтобы он знал, как обрабатывать окружающие элементы.

Я бы попробовал: 

.menu{
    position:relative;
    z-index:3;
}

Это может сработать, но без просмотра HTML немного сложно помочь.

1 голос
/ 13 августа 2011

Я посмотрел на сайт, и я думаю, что это просто проблема CSS.Я создал скрипку, которая делает то, что вы просите.Панель имеет абсолютную позицию, поэтому будет открыта поверх другого элемента.Я также немного изменил ваш JS.к этому 

$('#open-close-toggle').click(function(){
    $('#toggle-section').slideToggle(); 
    var buttonText = $(this).html();
    if(buttonText == "Open"){
        $(this).html("Close");
    }else{
        $(this).html("Open");
    }
});

Вот пример скрипки

...