Question

我有一个按钮，点击后切换我的列表显示。但是，我想添加一个额外的功能，以便在单击页面正文时，它将关闭列表。即列表已打开 - 单击页面上的任何其他位置但列表应该关闭。

我最初的尝试是：

$('body').click(function(){
    $('ul').slideUp();
});

问题是，因为按钮是身体的一部分 - 当点击按钮时它会打开ul，但同时它几乎立即滑回，因为已经点击了身体。

以下代码是<button>view dropdown</button>

的伪代码

<ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

ul{
    display:none; 
  }

$('button'.click(function(){
     $('ul').toggle();
 });

Answer 1

检查以确保您点击的项目没有该特定类：

$('body').on('click', function(e) {
  if (!$(e.target).is('.myclass')) {
    $('.myclass').toggle();
  }
});

body {
min-height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">Some Content</div>

或者，如果您还需要检查子元素（对于ul，您将需要这个）：

$('body').on('click', function(e) {
  if ($(e.target).closest('.myclass').length === 0) {
    $('.myclass').toggle();
  }
});

body {
min-height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myclass">
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
</ul>

此解决方案的另一个好处是，在运行JS代码时，不要求“.myclass”成为DOM的一部分。

Answer 2

我解决了你的问题。检查我的例子。

包裹就像身体一样。

＆＃13;

$(function() {
  $("#wrapper").click(function(event) {
    var myClass = $(event.target).hasClass("menu");
    if (myClass == true) {
      console.log("you clicked menu");

    } else {
      console.log("you clicked out of menu");

    }
  });
});

＆＃13;

#wrapper {
  width: 600px;
  height: 600px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <select class="menu" id="menu">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

＆＃13;

Answer 3

即使检查事件的来源（即event.target）是可行的方法，我个人也不喜欢这种方法，因为它过于依赖魔术常量。在许多用例中，我们正在检查event.target的类/ ID，这意味着每当我们更改页面标记时都必须手动更新它们。从长远来看，这可能会带来维护问题。

更优选且实际上更简单的解决方案将简单地利用发出的事件冒泡向上（即从子到父）直到它到达文档对象的事实。因此，您要做的是：

将点击事件监听器附加到您的按钮，但使用.stopPropagation()
将单击事件侦听器附加到文档（而不是<body>，因为它可能没有完整的视口高度）

这是许多UI / UX设计人员推出的典型“外部关闭点击”行为。

此外，您应该明确切换隐藏.toggle()元素的类，而不是使用<ul>（不推荐使用）。类似.toggleClass('hidden')然后使用.hidden { display: none; }就足够了。

要将其转换为代码，您可以执行以下操作：

$('button').click(function(e) {

  // Prevent event from bubbling up to body
  e.stopPropagation();

  // We toggle the .hidden class
  $('ul').toggleClass('hidden');
});

// Attach to document instead of body
// ... as body might not be full height
$(document).click(function() {
  // Always hide
  $('ul').addClass('hidden');
});

$(function() {
  $('button').click(function(e) {
  
    // Prevent event from bubbling up to body
    e.stopPropagation();
  
    // We toggle the .hidden class
    $('ul').toggleClass('hidden');
  });
  
  // Attach to document instead of body
  // ... as body might not be full height
  $(document).click(function() {
    // Always hide
    $('ul').addClass('hidden');
  });
});

ul.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="hidden">
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
</ul>
<button type="button">Toggle ul element</button>

Answer 4

您需要添加事件侦听器以检查单击了哪个元素以切换列表的显示。

HTML：

<button class="button">view dropdown</button>
<ul class="myList">
    <li class="listItems">link 1</li>
    <li class="listItems" >link 2</li>
    <li class="listItems" >link 3</li>
</ul>

JQuery的：

$(document).click(function(event) {
    var target = event.target.className;
    var isVisible = $('.myList').css('display');
    if (target != "listItems" && target != "myList"  && isVisible == "block" && target != "button") {
      $('.myList').css('display', 'none');
    }
    else if(target == "button")
      $('.myList').toggle();
});

的CSS：

.myList {
  display: none;
}

请查看此小提琴，查看代码的工作示例：http://jsfiddle.net/fymqrd7z/11/

单击正文以隐藏项目

4 个答案: