javascript - jQuery Mega Menu 打开和关闭问题

Question

我正在构建一个带有自定义大型菜单的网站，并且该菜单可以正常工作。

当您点击一个带有下拉菜单的链接时，它会打开，如果您点击另一个带有下拉菜单的链接，它会关闭打开的链接并打开新的链接。

但是我几乎要尖叫了，因为我希望能够通过单击打开的下拉列表的链接来关闭打开的下拉列表..

到目前为止，这是我的 jQuery:

jQuery(document).ready(function($){
  $('#menu-main-menu .menu-item-has-children a').click(function(){
    $('#menu-main-menu > .menu-open').removeClass('menu-open');
    $('.menu-drop').removeClass('menu-drop');
    $(this).parent('li').addClass('menu-open');
    $(this).parent('li').children('.sub-menu').addClass('menu-drop');
  });
});

如有任何帮助，我们将不胜感激。

非常感谢。

这是 fiddle https://jsfiddle.net/CharlieH/zbtboytc/

Answer 1

我为你做了一个 JsFiddle :

https://jsfiddle.net/zbtboytc/1/

jQuery(document).ready(function($){

  $('#menu-main-menu .menu-item-has-children').click(function() {
      if ($(this).hasClass('menu-open')) {
          $(this).removeClass('menu-open');
          $(this).find('.menu-drop').removeClass('menu-drop');
      } else {
        $('.menu-open').removeClass('menu-open');
        $('.menu-drop').removeClass('menu-drop');
        $(this).addClass('menu-open');
        $(this).children('.sub-menu').addClass('menu-drop');
      }
    });

});