0

ドロップダウンの切り替えメニューを作成していますが、頭を包むことができないという問題が1つあります。リスト項目をクリックすると、そのサブ項目が展開されますが、リストが展開されると、別のリストがクリックされると、最初の項目は本来のように収縮しますが、2 番目の項目は再度クリックするまで展開しません。この問題を解決するにはどうすればよいですか?

リストをクリックすると、クラスtoggledが最上位の親コンテナーに追加されるため、jQuery を使用して条件を作成できます。コードは次のとおりです。

$('#main-navigation a').click(function (e) {

/* Finding the drop down list that corresponds to the current section: */
var $dropdownMenu = $(this).next();

if ($dropdownMenu.hasClass('sub-menu')) { /* Checking if drop down menu exists for this menu item */
    if ($('.nav-menu > li').hasClass('toggled')) { /* There is toggled menu */
        if (($(this).parents().hasClass('toggled')) && (!$(this).parent().hasClass('toggled'))) {
            // The curent element has only a not-direct parent with "toggled" e.g. the element is deep link!');
            $dropdownMenu.slideToggle('fast');
        } else {
            //If the element is a top link, the class is removed and the lists dissappear
            $('li.toggled').removeClass('toggled').children('ul').slideUp('fast');
        }

    } else {
        // If there isn't a toggled menu, the current menu expands and a class is added
        $dropdownMenu.slideToggle('fast').parent('.nav-menu > li').addClass('toggled');
    }

}
})

HTML、CSS、JS コード全体はこちら: http://jsfiddle.net/nUrjy/

これがこのようなメニューを行うための最良の方法であるかどうかさえわかりません..

4

1 に答える 1

1

ここに少し変更を加えました: http://jsfiddle.net/JWMarchant/nUrjy/7/

コードを次のように単純化しました。

$('#main-navigation a').click(function (e) {
   /* Finding the drop down list that corresponds to the current section: */
   var dropdownMenu = $(this).next();

   if ($(this).parent('li').children('.sub-menu').length > 0) {
      $('.sub-menu').not(dropdownMenu).not(dropdownMenu.parents()).slideUp('fast');
      $(dropdownMenu).slideToggle('fast');
   }
});
于 2013-07-09T14:18:14.857 に答える