0

メニュー項目がクリックされてサブメニューがある場合、リスト内の現在の項目を下に移動し、サブメニューを所定の位置にスライドさせるメニューを作成しようとしています。唯一の問題は、クリックして下に移動した後のリスト項目のみが必要なことです

リストアイテムをクリックしてサブメニューがある場合、クリックした後のリストアイテムが下に移動し、サブメニューがリストアイテムのすぐ下にスライドするスライドメニューを作成しようとしていますクリックしました。問題は、サブメニューのサイズに応じて、さらにリスト項目を下に移動することだけです。

ここに私がすでに持っているjqueryがあります

$(document).ready(function() {
$('.button-wrapper').click(function(e) {
    $('.menu > li:nth-child(1)').toggleClass('first');
    $('.menu > li:nth-child(2)').toggleClass('second');
    $('.menu > li:nth-child(3)').toggleClass('third');
    $('.menu > li:nth-child(4)').toggleClass('fourth');
    $('.menu > li:nth-child(5)').toggleClass('fifth');
    $('.sub-menu li').removeClass('sub-first');
    $('.sub-menu li').removeClass('sub-second');
    $('.sub-menu li').removeClass('sub-third');
});

$(".menu a").click(function(e) {
    if($(this).next('.sub-menu').length > 0) {
        e.preventDefault();
        $('.sub-menu > li:nth-child(1)').toggleClass('sub-first');
        $('.sub-menu > li:nth-child(2)').toggleClass('sub-second');
        $('.sub-menu > li:nth-child(3)').toggleClass('sub-third');
        $('.sub-menu').closest('li').next().toggleClass('daniel');
    }
    else  {
        return true
    }
});

});

フィドルhttp://jsfiddle.net/uNuKF/を添付して、現在持っていることを示します。すべてのサブメニューがスライドすることに気付くでしょうが、将来のサブメニューを含まないスライドするためにクリックされたものだけが必要です

4

1 に答える 1

1

あなたはほとんどそこにいますが、関数は適切な子アイテムだけでなく、すべての .sub-menu アイテムを見つけています:

変化する：

$('.sub-menu > li:nth-child(1)').toggleClass('sub-first');
... etc

為に：

$(this).next('.sub-menu').find('li:nth-child(1)').toggleClass('sub-first');
... etc

この更新された Fiddleには、上記の修正と公開アニメーションが含まれています。

于 2013-10-20T10:49:53.310 に答える