jQueryクリック型の最初の要素

Question

私はマルチレベルの深いメニューを持っている問題を解決しようとしています。私は最初のレベルの要素（クラスを追加する場合は.ubermenu-active）をクリックすると、そのクラスの他の第1レベルの要素を探して削除するようにしています。

$('.ubermenu-item-level-0 span').on('click',function() { 
    var target = $('.ubermenu-item-level-0'); 
    $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active'); 
    target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active'); 
}); 

HTML（モック）：サブ要素のいずれかがクリックされた場合

<ul class="ubermenu"> 
    <li class="ubermenu-item-level-0"> 
     <a class="ubermenu-target"> 
      <span class="ubermenu-target-title">Level 1</span> 
     </a> 
     <ul class="ubermenu-submenu"> 
      <li class="ubermenu-item-level-1"> 
       <a class="ubermenu-target"> 
        <span class="ubermenu-target-title">Level 2</span> 
       </a> 
      </li> 
      <li class="ubermenu-item-level-1"> 
       <a class="ubermenu-target"> 
        <span class="ubermenu-target-title">Level 2</span> 
       </a> 
       <ul class="ubermenu-submenu"> 
        <li class="ubermenu-item-level-2"> 
         <a class="ubermenu-target"> 
          <span class="ubermenu-target-title">Level 3</span> 
         </a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <li class="ubermenu-item-level-0"> 
      <a class="ubermenu-target"> 
       <span class="ubermenu-target-title">Level 1</span> 
      </a> 
     </li> 
    </li> 
</ul> 

は今の親はあなたがイベントの伝播を停止することができます

Answer 1

サンプルHTMLは私が見たいものではありません。 。 。具体的には、あなたの2番目の<li class="ubermenu-item-level-0" . . .要素は現在、最初の要素の下に子要素として表示されていますが、兄弟でなければならないような説明が得られます。

解決策のために、私はそれらの2つがお互いの兄弟であると仮定していると思いますし、何らかの形でコードが混ざり合っています。 :)

私はそれをどのように扱うのですか。 。 。

var sFirstLevelMenuClass = ".ubermenu-item-level-0"; 
var sActiveMenuClass = "ubermenu-active"; 
var $firstLevelMenuOptions = $(".ubermenu").find(sFirstLevelMenuClass); 

$firstLevelMenuOptions.children("a").children("span").on("click", function() { 
    $firstLevelMenuOptions.removeClass(sActiveMenuClass); 
    $(this).closest(sFirstLevelMenuClass).addClass(sActiveMenuClass); 
}); 

基本的には、ロジックを簡略化し、jQueryコードの小さな問題を修正しました。

---

、あなたの変更イベントのためのあなたのセレクタとして$('.ubermenu-item-level-0 span')を使用する際の詳細な説明

は問題があることでした。これは、 "span要素のいずれかであり、その要素はubermenu-item-level-0要素の子孫です"と解釈されます。したがって、ubermenu-item-level-0のリスト項目の直下にあるスパンに加えて、ubermenu-item-level-1とubermenu-item-level-2要素の下位要素も子孫であるため、ピックアップしていました。

だから、私は（注「それはubermenu-item-level-0要素の直接の子である、aの直接の子であるすべてのspanの、」に変換され$firstLevelMenuOptions.children("a").children("span")にあなたのセレクターを変更：$firstLevelMenuOptionsを経由$(".ubermenu").find(".ubermenu-active");に等しくなるように設定されていますロジックの最初のコード）。これにより、セレクタが下位レベルspansを選択しなくなります。

より効率的にするためにセレクタの一部を切り捨てて、唯一変更したのはubermenu-activeクラスの処理の流れでした。私の解決策では、2つのステップがあります。

2. がクリックされたspan（すなわち、$(this)）

に最も近いubermenu-item-level-0要素にubermenu-activeを追加ubermenu-activeからALLubermenu-item-level-0要素を削除しますそれは基本的にリストをリセットしてから、適切なメニュー項目を選択してアクティブにします。

Answer 2

を閉じます。

event.stopPropagation() 

Answer 3

完全なHTMLを見ることなく、私はこれを試すことを提案しようとしていた：

$('.ubermenu-item-level-0 span').on('click',function(e) { 
     e.stopPropagation(); 
     var target = $('.ubermenu-item-level-0'); 
     $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active'); 
     target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active'); 
    }); 

Answer 4

現在、target varはすべての要素をクラス.ubermenu-item-level-0で選択しているため、クラスを切り替えるとすべての親要素が切り替わります。あなたのターゲットvarは、クリックされた要素に相対的なものでなければなりません。var target = $(this).closest('.ubermenu-item-level-0');