在 JavaScript 中單擊另一個手風琴時刪除顯示手風琴

Question

訪問此網站： http : //dev.giftsdesign.com.sg/product-list/0/0

我會期待這樣的輸出，如果我點擊一個側邊欄菜單，其他側邊欄菜單應該被折疊。

點擊前： <ul class="sidebar-submenu" style="display: none;">

點擊后： <ul class="sidebar-submenu show" style="display: block;">

我認為這是代碼，

$(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);
        }
    });

如何修改以獲得預期的輸出。 請幫我！

Answer 1

嘗試這個：

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

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

Answer 2

嘗試這個：

$(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);
        
    });