jquery - jQuery:別の要素に対して絶対配置された要素を配置/アニメーション化する方法

Question

そのため、ナビゲーション項目のスタック (行) を含む垂直ナビゲーション メニューを作成しようとしています。これらの行のいずれかが選択されたときに、メニューが上 (および下) からスライドアウトし、このサブメニューの上部がクリックされた行の下部に達したときに必要です。これらのサブメニューには、サブメニューの下部が関連するナビゲーション項目の下部と等しい開始位置も必要です。これにより、下にアニメーション化するとすぐに表示されます。

このポジショニング、停止点と開始点は、このフィドル -> http://jsfiddle.net/pGfCX/57/で確認できます。始点と終点だけ注意してください。フィドルの残りの部分は、position:relative の性質により壊れています。

z-index は後続のナビゲーション項目のプッシュを修正できると思いました (リンクされたばかりのフィドルでわかるように)...しかし、それはうまくいかないようです。position:absolute のみが適切なオーバーラップを有効にするように見えます (つまり、サブメニューはその上の要素の下に隠れ、その下の要素を覆います)。残念ながら、これにも欠点があります。このフィドルでわかるように: http://jsfiddle.net/pGfCX/60/。毎回同じクラスを使用しているため、開始位置と終了位置が常に同じであることに気付くでしょう。すべてのサブメニューを独自の一意の ID として具体的に配置することはできますが、それは非常に非効率的であり、維持するのが困難です。

基本的に、2 つのアプローチを組み合わせる必要があります...開始/終了位置の相対位置と、適切なオーバーラップを可能にする絶対位置。

うまくいけば、これは理にかなっています... 私は本当に助けが必要です. 私は2つのアプローチに固執しており、どちらも機能していません。イライラします。

これが私の現在のjQueryコードです：

$('.row').click(function() {

    // make all siblings AFTER row clicked get this class to reduce z-index and allow the menu to display above these rows (while still remaining below the rows above)

    $(this).nextAll().addClass('rowZ');
    $(this).next('.menu').show()
    $(this).next('.menu').animate({'top':'0'});

});

// when menu is out, the row clicked is the header row, upon clicking this, the related menu (and by default, all subsequent menus within) animate back up and hide

$('.rowHead').click(function() {

    $(this).next('.menu').animate({'top':'-100%'});
    $(this).next('.menu').hide();

});

どんな助けでも大歓迎です。ありがとう！

EDIT*ナビゲーション アイテム内の新しいアプローチ... メニューで、ナビゲーション アイテムに対して絶対位置を指定し、相対的に配置できるようにします。ただし、z-index はオフのようです (つまり、ナビゲーション アイテム (親) の上にアニメーション化されていますが、z-index は別の方法で提案します:

http://jsfiddle.net/pGfCX/81/

Answer 1

編集：これは答えではありませんでしたが、同様の代替手段としてより適切に機能するため、このリビジョンにロールバックしました。

http://jsfiddle.net/pGfCX/70/

これはあなたが好きなように機能しているようです。相対位置を維持し、z-index を修正し、.row に背景色を与えます :) 私の z-index が壊れているように見えたので、私を際限なく混乱させました。 ）、しかし、コンテナの背景が灰色だったため、列の後ろにないように見えました. 純粋な CSS 修正である必要があります。

#container{
    background:grey;
    width:100px;
    height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:1;
}
.row{
    width:100px;
    height:40px;
    cursor:pointer;
    position:relative;
    z-index:1100;
    background-color: pink;
}
 .row:hover{
    background:red;
}
.menu{
    background:yellow;
    width:100px;
    height:300px;
    position:relative;
    top:-100%;
    left:0;
    z-index:2;
    display:none;
}
.menu .row {
    z-index: 10;   
}

</p>

Answer 2

topこれらの絶対配置要素にルールを設定しない場合、それらの要素は の上部に浮くのではなく、各要素の前.menuにある相対配置要素の真下にぶら下がります。次に、jQueryとアニメーションを使用して、目的の位置からメニューを表示/非表示にすることができます。.row#containerslideDown()slideUp()

jsFiddle での作業例

サンプルコード

CSS

#container {
    background:#666;
    width:100px;
    height:100%;
    position:fixed;
    top:0;
    left:0;
   z-index: 10;
}
.row {
    width:100px;
    height:40px;
    cursor:pointer;
    position:relative;
    z-index:1;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    box-shadow: inset 0px 40px 40px -40px #fff;
}
.row:hover {
    background:red;
}
.row.active {
    background: #333;
    color: #fff;
}    
.menu {
    background: #999;
    width:100px;
    height:auto;
    position:absolute;
    left:0;
    z-index: 2;
    display:none;
    box-shadow: 0px 4px 1px rgba(0,0,0,0.3);
}

JS

$('.menu').prev('.row').click(function() {

    // Stops the handler from firing if an animation is in progress
    if (!$('#container').is('.working')) {

        // Begin manipulating the menu...
        $('#container').addClass('working');

        // Defines how fast menus will slide up/down
        var slideSpeed = 200;    

        // If menus need to be hidden, wait for them to slide up, otherwise, don't bother
        var d = ($(this).parent().children('.row.active').length > 0) ? slideSpeed : 0;

        // IF this rowhead is collapsed, expand it and collapse expanded siblings
        if (!$(this).is('.active')) {

// Collapse the active menu at this level, if any             
            $(this).siblings('.row.active').removeClass('active').next('.menu').slideUp(d, function(){
             // When this menu is hidden, collapse all expanded submenus
             $(this).find('.row').removeClass('active');
             $(this).find('.menu').hide();
        });

        // Expand this menu after others have finished collapsing
        window.setTimeout(function(a){

            // Fallback for bodyless rowheads: skips wait if this rowhead has no menu
            b = ($(a).parent().find('.row.active').length > 0) ? slideSpeed : 0;

            // Expand this menu
            $(a).addClass('active').next('.menu').slideDown(slideSpeed, function(){
                // Ready container for more interaction after menu (if any) expands 
                $('#container').removeClass('working');            
            });
        },d,this);
    }

    // Otherwise, if this menu is expanded, collapse it                          
    else $(this).removeClass('active').next('.menu').slideUp(d, function(){ 

         // When this menu is hidden, collapse all expanded submenus
         $(this).find('.row').removeClass('active');
         $(this).find('.menu').hide();

         //Ready the container for more interaction        
         $('#container').removeClass('working');
        });
    }
});

</p>