Question

我是jquery的新手，我正在查看谷歌的代码来创建他们的“更多”按钮。我已经让它工作了，但是让下拉消失的唯一方法就是再次单击“更多”按钮。有没有一种方法可以添加来改变它，以便下拉菜单本身外的任何点击都会关闭它？感谢您的见解！

Answer 1

将点击事件绑定到html以捕获所做的任何点击，并使其隐藏菜单

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

然后使用click

覆盖菜单.stopPropagation();事件中的内容

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();

小提琴： http://jsfiddle.net/rKaPN/12/

Answer 2

您也可以添加它，因此用户无需单击

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})

Answer 3

打开菜单时，创建一个与窗口宽度和高度相同的透明叠加div。点击该div后，关闭菜单并销毁div。

Answer 4

不是测试html dom元素上的每次点击，而是可以将模糊事件绑定到特定菜单项，当您激活它时，然后在模糊事件触发时将其关闭。替换这几行：

  //displaying the drop down menu
  $(this).parent().parent().find('.active').removeClass('active');
  $(this).parent().addClass('active');

用这些：

  //displaying the drop down menu
  $('.active').removeClass('active');
  $(this).parent().addClass('active');
  $(this).blur(function() {
      $('.active').removeClass('active');
  });

Jquery：单击菜单外部后，下拉菜单不会消失

4 个答案: