jQuery：Menuコンテンツの上にスクロールダウンしてコンテンツをプッシュダウンしない

Question

現在、このトップメニューは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(); 
    });  
}); 

私は間違っていますか？

Answer 1

私はサイトを見て、私はちょうどCSSの問題を考えています。私はあなたが求めていることをするバイブルを作成しました。パネルは絶対位置を持ち、したがって他の要素上に開かれます。あなたのJSも少し変えました。この

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

Here is the fiddle example

Answer 2

メニューcssにz-インデックスと位置プロパティを追加します。 Z-indexはHTMLに要素のレイヤー位置を知らせる。 z-indexが正しく機能するようにするには、要素の位置を指定する必要があります。そのため、周囲の要素の処理方法がわかります。

私がしようとするだろう：動作しますが、HTMLを見ることなく、助けには少し難しいかもしれません

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

を。