Jqueryで切り替え-期待どおりにメニューを閉じることができません

debugcn 投稿 Dev

ベロデ

メニューの表示と非表示に問題があります。ユーザーが「メニューを表示..」リンクを初めてクリックすると、メニューが表示されます。2回目のクリックで、同じメニューが消えるはずです。

<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();}
});

これで、ページの任意の場所をクリックするとメニューが閉じますが、トグル機能が機能しなくなりました。[メニューを表示...]リンクを2回クリックしても、メニューが閉じません。

Hikarunomemory

クリックした要素がであるかどうかは.showmenu、を使用して確認できますevent.target。

これがデモです：

$(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();
  }
})

<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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]