0

我正在创建一个下拉切换菜单，但我有一个问题，我无法解决它。单击一个列表项会展开它的子项，但是当一个列表展开时，当单击另一个列表项时，第一个会按应有的方式收缩，但第二个不会展开，直到再次单击它。我该如何解决这个问题？

单击列表时，会将一个类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 回答