在 JavaScript 中单击另一个手风琴时删除显示手风琴

Question

Visit this website: http://dev.giftsdesign.com.sg/product-list/0/0

I will expect the output like, If I click one sidebar menu, others sidebar menus should be collapsed.

Before Click: <ul class="sidebar-submenu" style="display: none;">

After Click: <ul class="sidebar-submenu show" style="display: block;">

I think this is code for that,

$(document).ready(function() {

    $('.sidebar-link').click(function(e) {
        e.preventDefault();

        var $this = $(this);

        if ($this.next().hasClass('show')) {
            $this.next().removeClass('show');
            $this.next().slideUp(350);
        } else {
            $this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').removeClass('show');
            $this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').slideUp(350);
            $this.next().toggleClass('show');
            $this.next().slideToggle(350);
        }
    });

How to modify to get expected output. Please help me!

Answer 1

Try this:

$('.sidebar-link').click(function (e) {
  e.preventDefault();

  $('.show').removeClass("show");
  $('.show').css("style","none");
  ......
  
});

Answer 2

try this:

$(document).ready(function() {

    $('.sidebar-link').click(function(e) {
        e.preventDefault();

        var $this = $(this);
      document.querySelectorAll('.sidebar-link').forEach(el=> {
        el.classList.remove('show')
      });
e.classList.add('show');
            $this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').removeClass('show');
            $this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').slideUp(350);
            $this.next().toggleClass('show');
            $this.next().slideToggle(350);
        
    });