jQuery单击以显示/隐藏菜单，类似于桌面应用程序

Posted 2021-02-25

$(document).ready(function() {
 
  $('li ul').hide();
 
  $('a.arrow').click(function(e) {
    e.preventDefault();
    $(this).find('+ ul').toggle();
    $(this).toggleClass('active');
 
    s = $(this).parent().find('ul');
    $('a.arrow').parent().find('ul:visible').not(s).hide(0,function() {
      $(this).parent().find('a.arrow').removeClass('active'); 
    });
      // Wooo it works! Clicking a button hides the current open one and removes the 'active' class
  });
 
 
  $("a.arrow").mouseover(function(){ $(this).addClass('over')})
              .mouseout(function(){ $(this).removeClass('over')});
    // Hover class to be added or removed on hover. Don't need :hover css if using this
 
 
  $(document).click(function(event){ 		
    var target = $(event.target);
    if (target.parents("body li").length == 0) {				
      $("a.arrow").removeClass('active');
      $("a.arrow").parent().find("ul").hide();
    }
    event.stopPropagation();
  });
    // Hide all menus when clicking outside of them (i.e on the document)
 
});