javascript - 单击另一个元素时关闭 Accordion 元素

Question

这是关于 jsfiddle 的工作示例

我正在尝试添加一个片段以在单击某个元素时关闭打开的 Accordion 元素。我已经添加了一个类“打开”，但似乎无法在单击另一个类时删除该类。

目前它们都可以打开，但我希望避免这种情况发生，因为它会在移动设备上占用太多空间并强制背景滚动，这也会导致导航折叠。

$( document ).ready(function() {


    // header js
        (function($) {
        $.fn.menumaker = function(options) {  
         var cssmenu = $(this), settings = $.extend({
           format: "dropdown",
         }, options);
         return this.each(function() {
           $(this).find(".hamburger-button").on('click', function(){
             $(this).toggleClass('menu-opened');
             var mainmenu = $(this).next('ul');
             if (mainmenu.hasClass('open')) { 
               mainmenu.slideToggle().removeClass('open');
             }
             else {
               mainmenu.slideToggle().addClass('open');
               if (settings.format === "dropdown") {
                 mainmenu.find('ul').show();
               }
             }
           });
           cssmenu.find('li ul').parent().addClass('has-sub');
           
           

          

          $('#cssmenu li.active').addClass('open').children('ul').show();
            $('#cssmenu li.has-sub>a').on('click', function(){
              $(this).removeAttr('href');
              var element = $(this).parent('li');
              if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp(200);
              }
              else {
                element.addClass('open');
                element.children('ul').slideDown(200);
                element.siblings('li').children('ul').slideUp(200);
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp(200);
              }
            });

        

      /*
           
          multiTg = function() {
             cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
             cssmenu.find('.submenu-button').on('click', function() {
               $(this).toggleClass('submenu-opened');
               if ($(this).siblings('.has-sub').hasClass('open')) {
                 $(this).siblings('ul').removeClass('open').slideToggle();
               }
               else {
                 $(this).siblings('ul').addClass('open').slideToggle();
               }
             });
           };
      */     
      
     
           if (settings.format === 'multitoggle') multiTg();
           else cssmenu.addClass('dropdown');
           
           
           
        resizeFix = function() {
          var mediasize = 1000;
             if ($( window ).width() > mediasize) {
               cssmenu.find('ul').show();
             }
             if ($(window).width() <= mediasize) {
               cssmenu.find('ul').hide().removeClass('open');
             }
           };
           resizeFix();
           return $(window).on('resize', resizeFix);
         });
          };
        })($);

        (function($){
        $(document).ready(function(){
        $("#cssmenu").menumaker({
           format: "multitoggle"
        });
        });
        })($);


});

Answer 1

这样的事情怎么样:

      cssmenu.children().forEach(function(elem){
         if(elem === mainmenu){
           continue;
         }
         elem.removeClass('open');
      });
      mainmenu.slideToggle().addClass('open');
      if (settings.format === "dropdown") {
        mainmenu.find('ul').show();
      }

在添加 open 类之前，将其从所有其他元素中清除。