Question

我有一个显示和隐藏菜单的问题。当用户第一次点击＆＃34;显示菜单时。＆＃34;链接，菜单应该出现。在第二次单击时，相同的菜单应该消失。

<p><a id="showmenu1" href="#">Show menu 1</a></p>
<p><a id="showmenu2" href="#">Show menu 1</a></p>

<div id="menu1" class="topmenus"> 
<div class="mystyle">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</div>

<div id="menu2" class="topmenus"> 
<div class="mystyle">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</div>

我使用Jquery的切换功能，它可以正常工作。

$(document.body).on("click","#showmenu1",function(e) { 
e.preventDefault();
$("div.topmenus").not("#menu1").hide();
$("#menu1").toggle();
}); 

$(document.body).on("click","#showmenu2",function(e) { 
e.preventDefault();
$("div.topmenus").not("#menu2").hide();
$("#menu2").toggle();
});

但我还想在用户点击页面上的任何位置时关闭所有菜单。所以，我补充说：

$(document).mouseup(function(e) {
if (!$("#menu1").is(e.target) && $("#menu1").has(e.target).length === 0) {$("#menu1").hide();}
if (!$("#menu2").is(e.target) && $("#menu2").has(e.target).length === 0) {$("#menu2").hide();}
});

现在当我点击页面上的任何地方时菜单关闭但是切换功能不再起作用 - 当我第二次点击＆＃34;显示菜单...＆＃34;链接，菜单没有关闭。

Answer 1

您可以使用.showmenu检查点击的元素是否为event.target。

这是一个演示：

＆＃13;

$(document).on("click", ".showmenu", function(e) {
  e.preventDefault();
  var $menus = $(".topmenus")
  var index = $(this).index('.showmenu')
  var hidingTarget = $menus.splice((index-1), 1)
  $(hidingTarget).hide()
  $menus.toggle();
});

$(document).on('click', function(e) {
  if (!$(e.target).hasClass('showmenu')) {
    e.stopPropagation()
    $(".topmenus").hide();
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a id="showmenu1" class="showmenu" href="#">Show menu 1</a></p>
<p><a id="showmenu2" class="showmenu" href="#">Show menu 2</a></p>

<div id="menu1" class="topmenus">
  <div class="mystyle">
    <ul>
      <li>Item1-1</li>
      <li>Item1-2</li>
    </ul>
  </div>
</div>

<div id="menu2" class="topmenus">
  <div class="mystyle">
    <ul>
      <li>Item2-1</li>
      <li>Item2-2</li>
    </ul>
  </div>
</div>

＆＃13;

在Jquery中切换 - 无法按预期关闭菜单

1 个答案: