Как закрыть подменю при нажатии на другое подменю

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/

Я не могу повторить это пример с кодом, который я сейчас использую ...

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>