3

私はウェブ全体を探していましたが、解決策が見つかりません。私もjQueryを初めて使用します。

私の場合：

ナビゲーションバーがあり、その中の各リンクがメガメニューをアクティブ化/トリガーします（各リンクには独自のメガメニューがあります）。

必要なもの：

各リンクで独自のメガメニューをアクティブにする方法が必要です。メガメニューは次の場合に閉じる必要があります。

  1. ユーザーがナビゲーションバーの別のアイテムをクリックします。

  2. ユーザーは、ナビゲーションバーの同じアイテムをクリックします。

  3. ユーザーは、メガメニュー内の「閉じるボタン」（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>

「SexyDropDownMenu」のスクリプトを見たことがありますが、問題は、ホバーをクリックするとトリガーされるメニューが閉じてしまうことです。前述したように、jQueryを初めて使用するため、私が必要とするものにそれを適応させます。

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

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

ありがとう。

4

3 に答える 3

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

于 2010-11-16T17:25:21.843 に答える
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);
    });
});

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

于 2010-11-16T17:10:35.623 に答える
0

Navbar の上位レベルごとに、<li>「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();
  }
});

[閉じる] ボタンのクリック ハンドラーを追加するだけです。これはテストされていないコードなので、問題がある場合はお知らせください。

于 2010-11-16T17:00:53.133 に答える