0

jqueryの学習を始めたばかりなので、簡単に行ってください。

ボタンをクリックするとメニューがスライドアウトしてメニューが表示されるスライドアウトメニューを作成しようとしています.メニュー項目をクリックすると、選択に関連するサブメニューがスライドアウトして既存のメニューを置き換えますが、私は特定の部分で立ち往生しています。リスト項目をクリックした瞬間、私のjqueryコードはリンクの処理を妨げ、代わりに正しいサブメニューを表示しますが、最後に到達してサブメニューがなくなると、リンクは機能しません.

私が達成しようとしているのは、.menu ul li に sub-menu と呼ばれる子 div がある場合はデフォルトを防止し、sub menu と呼ばれる子 div がない場合はそのままにしておくことです。

私は一日中検索しましたが、これを学び始めたのは先週のことです。

ここにhtmlがあります

  <ul class="menu">
    <li class="menu-item"><a href="one">1</a></li>
    <li class="menu-item"><a href="two">2</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="two-one">3-1</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="three">3</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="three-one">3-1</a></li>
        <li class="menu-item"><a href="three-two">3-2</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="three-two-one">3-2-1</a></li>
          </ul
        </li>
      </ul>
    </li>
    <li class="menu-item"><a href="four">4</a></li>
  </ul>

これが私が立ち往生しているjqueryの部分です

$('nav ul li').click(function(e) {
    e.preventDefault();
    $('.sub-menu').toggleClass('open');
});
4

2 に答える 2

1

:has()セレクターを使用するだけです：

$('nav ul li:has(.sub-menu)').click(function(e) {

});

パフォーマンスの提案として、デリゲート ハンドラーをnav要素にバインドし、不要なulものを選択から削除することをお勧めします。おそらく、すべての .sub-menu要素を切り替えるのではなく、一致した要素内を検索することも意図していました。

$('nav').on('click', 'li:has(.sub-menu)', function (e) {
    e.preventDefault();
    $(this).find('.sub-menu').toggleClass('open');
});
于 2013-10-16T14:51:39.870 に答える
0

私はそれほど上手ではありませんが、これは役に立ちます：

if( $('#element').find('*').length > 0 ) {
  // Do something
  $('#element').click( function () { } );
}

参照：

http://api.jquery.com/find/

children()の代わりに使用して同じことを達成できますfind('*')。

http://api.jquery.com/children/

于 2013-10-16T14:47:19.140 に答える