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>

单击外部菜单以使用jQuery关闭它

1 个答案: