当前的下拉菜单不会在打开后关闭 [英] current dropdown won't close after opening

问题描述

现在，当点击导航项目时，下拉菜单将打开。当我再次点击相同的项目时，它不会关闭。

只有当我点击另一个导航项以打开另一个下拉列表时，我才能关闭它。

当我点击它时，如何使当前的导航项目关闭，同时保持其他导航项目点击时关闭的功能？

$ b $（$ {pre> $（li.dropdown-control> a）click（function（event）{
event.preventDefault（）
$ '.dropped'）。removeClass（'dropped'）;
var nextSibling = $（this）.next（）;
nextSibling.toggleClass（dropped）;
}）;


解决方案

查看您的代码：

  $（'。dropped'）。removeClass（'dropped'）; 
 var nextSibling = $（this）.next（）; 
 nextSibling.toggleClass（dropped）; 
  

这将删除所有 drop classes包括您刚刚点击的那个，如果它已经被打开），然后将其添加回相同的元素。这就是为什么它似乎没有关闭 - 你实际上关闭并立即打开它。

尝试这样做：

  var nextSibling = $（this）.next（）; 
 nextSibling.toggleClass（dropped）; 
 $（'。dropped'）。not（nextSibling）.removeClass（'dropped'）; 
  

I have this script that opens dropdowns under my navigation items.

Right now, when a navigation item is clicked, the drop down will open. When I click the same item again it will not close.

I am able to close it only if I click on another navigation item to open another dropdown.

How can I get the current navigation item to close when I click it, while keeping the functionality of it closing when other navigation items are clicked?

$("li.dropdown-control > a").click( function (event) {
    event.preventDefault()
        $('.dropped').removeClass('dropped');
        var nextSibling = $(this).next();
        nextSibling.toggleClass("dropped");  
});

解决方案

Looking at your code:

    $('.dropped').removeClass('dropped');
    var nextSibling = $(this).next();
    nextSibling.toggleClass("dropped");  

this will remove ALL the dropped classes (including the one you just clicked on, if it's already dropped open) and then add it back to the same element. That's why it never seems to close -- you actually close and open it again immediately.

Try this instead:

    var nextSibling = $(this).next();
    nextSibling.toggleClass("dropped");  
    $('.dropped').not(nextSibling).removeClass('dropped');

这篇关于当前的下拉菜单不会在打开后关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！