单击另一个子菜单时如何关闭子菜单

Question

[我正在尝试执行一项功能，当我单击子菜单时它会打开，但是当我单击另一个菜单时我想关闭以前打开的一个。

这是我的代码，当我单击打开和关闭子菜单时，它的作用是。

// Dropdown menu
$(".sidebar-dropdown > a").click(function () {
    $(".sidebar-submenu").slideUp(200);

    if ($(this).parent().hasClass("active")) {
        $(".sidebar-dropdown").removeClass("active");
        $(this).parent().removeClass("active");

    } else {

        $(".sidebar-dropdown").removeClass("active");
        $(this).next(".sidebar-submenu").slideDown(200);
        $(this).parent().addClass("active");


    }

});

而且我想做的基本上是这样：http://jsfiddle.net/7qyE9/3/

我无法使用我现在正在使用的代码复制该示例...

编辑：

这是我的HTML代码：https://jsfiddle.net/vumk0sfq/2/

Answer 1

重要：我们宁愿为解决方案提供帮助，也不为他们服务。我记得自己问过第一个问题。这就是为什么我这次会为您提供帮助。用您的代码创建一个代码段，以便我们将来帮助您获得所需的代码。如果您找不到错误的地方，请举一个更好的工作例子。

---

这是您发布的两个代码的组合。应该可以正常工作。请注意，如果要在开始时打开它们，则需要具有active类。

$(".sidebar-dropdown > a").click(function () {
    $(".sidebar-submenu").slideUp(200);

    $(".sidebar-dropdown").removeClass("active");

  if ($(this).parent().hasClass("active")) {
        $(this).parent().removeClass("active");

    } else {
        $(this).next(".sidebar-submenu").slideDown(200);
        $(this).parent().addClass("active");
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
     <div class="sidebar-dropdown active">
         <a>First submenu</a>
         <ul class="sidebar-submenu">
             <li>Item1</li>
             <li>Item2</li>
         </ul>
     </div>
     
     <div class="sidebar-dropdown active">
         <a>Second submenu</a>
         <ul class="sidebar-submenu">
             <li>Item3</li>
             <li>Item4</li>
         </ul>
     </div>
</div>