jQuery：クリック時にメニューが表示/消えます

Question

私はウェブ全体を見てきましたが、解決策が見つかりません。私もjqueryに非常に新しいです。

私の場合：

NAVバーがあり、その中の各リンクはメガメヌをアクティブ化/トリガーします（各リンクには独自のメガメヌがあります）。

必要なもの：

各リンクに独自のメガメヌをアクティブにする方法が必要です。

1. ユーザーは、NAVバーの別のアイテムをクリックします。

2. ユーザーは、NAVバーの同じアイテムをクリックします。

3. ユーザーは、Megamenu内の「閉じるボタン」（x）グラフィックをクリックします（簡単なためにHTMLには表示されません）。

HTML：

<div id="top-nav">
 <ul>
  <li><span>Products &amp; Services</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Support &amp; Training</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Communities</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Store</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
 </ul>
</div>

「セクシーなドロップダウンメニュー」のスクリプトを見てきましたが、問題はホバーのクリックによってトリガーされるメニューを閉じることです。必要なものに適応してください。

http://www.sohtanaka.com/web-design/examples/drop-down-menu/

どんな助けも大歓迎です。

ありがとう。

Answer 1

クリックハンドラーを別のアイテム/同じアイテム/クローズボタンに添付します。

$(function(){
    $('#top-nav span').click(function(){
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq('+divTrigger+')');
        $('.megamenu').slideUp(200);
        if(thisMegaMenu.is(":not(':visible')")){
        thisMegaMenu.slideDown(200);
        }
});
    $('.megamenu').append("<a href=# id=closeButton>x</a>");
    $('#closeButton').live('click',function(){
        thisMegaMenu.slideUp(200);
    });
});

ここで試してみてください

Answer 2

魅力のように機能するこの他のソリューションを入手することができました。

$(function(){
//Megamenus
$('#top-nav li').click(function(){//set up a click event for the li
    $(this).siblings('.active').click();//click any other lis which are active to close their menus
    $(this).find('.megamenu').toggle();//toggle the child megamenu
    $(this).toggleClass('active');//toggle a class so we can identify any open megamenus
});

$('.megamenu').click(function(event){//hide the megamenu on load and set up a click event..
    $(this).parents('li').click();//..that just clicks the parent li
    event.stopPropagation();//stop the click bubbling up to the parent li
  });
});

私の問題は、両方のソリューションのどれが使用する方が良いかということです。しかし、これは今では良い問題です：p

で提供されるソリューション： http://codingforums.com/showpost.php?p=1016305&postcount=2

Answer 3

より高いレベルのそれぞれについて <li>s navbarで、「Navbar」のようなクラスを与えます。それからあなたのjQueryは次のように見えるかもしれません：

$('li .navbar').click(function() {
  if($(this).find('.megamenu').is(':visible')) { // Already open
    $(this).find('.megamenu').hide();
  } else { // Close others first
    $('.megamenu').each(function() {
      $(this).hide();
    });
    $(this).find('.megamenu').show();
  }
});

閉じるボタンのクリックハンドラーを追加するだけです。これはテストされていないコードであることに注意してください。問題があるかどうかを教えてください。