单击外部菜单以使用 jQuery 将其关闭

Question

我想在不使用 event.stopPropagation() 的情况下通过单击菜单外部（包括打开菜单的链接）来关闭菜单。

jQuery

$('a').click(function() {
  if ($(this).next().is(':visible')) $(this).next().hide();
  else $(this).next().show();
});
$(document).click(function(e) {
  if ($(e.target).is('a, ul'))  return false;
  else $('ul').hide();
}); 

CSS

td { padding:20px; }
ul { display:none; position:absolute; background:yellow; padding:10px; }

HTML

<table>
<tr>
<td><a href="#">show</a><ul>list 1</ul></td>
<td><a href="#">show</a><ul>list 2</ul></td>
<td><a href="#">show</a><ul>list 3</ul></td>
</tr>
</table>

http://jsfiddle.net/d8o6L71g/

此代码的唯一问题是，当我单击打开另一个菜单时，其他菜单仍保持打开状态。

Answer 1

您需要明确说明您希望菜单何时消失。你先把所有的东西都隐藏起来怎么样？ http://jsfiddle.net/d8o6L71g/3/

  $('a').click(function() {
    if ($(this).next().is(':visible'))
    {
    	$(this).next().hide();
    }
    else
    {
      $('a').next().hide();
      $(this).next().show();
    }
    
  });
  $(document).click(function(e) {
    if ($(e.target).is('a, ul'))
    {
      return false;
    }
    else 
    {
      $('ul').hide();
    }
  }); 

td { padding:20px; }
ul { display:none; position:absolute; background:yellow; padding:10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>




<table>
<tr>
<td><a href="#">show</a><ul>list 1</ul></td>
<td><a href="#">show</a><ul>list 2</ul></td>
<td><a href="#">show</a><ul>list 3</ul></td>
</tr>
</table>