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');
  });
});

对此的任何帮助将不胜感激。

非常感谢。

Heres the 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');
      }
    });

});

Answer 2

你能提供HTML代码吗？

您可以使用.slideToggle（）进行打开/关闭。

就像https://jsfiddle.net/wp6zk5u9/1/

一样

<button>Toggle</button>
<p>
  this text slideToggle
</p>

和

$( "button" ).click(function() {
  $( "p" ).slideToggle( "slow" );
});

Answer 3

我认为在单击链接的情况下不会将菜单删除添加到父级会解决问题。

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');
    if(!$(this).is(a)){
      $(this).parent('li').addClass('menu-open');
      $(this).parent('li').children('.sub-menu').addClass('menu-drop');
    }
  });
});

jQuery Mega菜单打开和关闭问题

3 个答案: