jQueryのセレクタ

Question

私はメニュー&を作成

一切のli親李の子供のクリックだけの子設定.activeクラスにしたいん（包み込むワードプレスのテーマで使用）

$('#mobile-advanced li.menu-item-has-children').on('click', function() { 
 
    $(this).toggleClass('active'); 
 
}); 
 

 
// just for test 
 
$('a').on('click', function (e) { 
 
    e.preventDefault() ; 
 
});

li.active{ 
 
    background-color: #FFB94B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="mobile-advanced"> 
 
    <li class="menu-item menu-item-has-children"> 
 
    <a href="">T 1</a> 
 
    <ul> 
 
     <li class="menu-item menu-item-has-children"> 
 
     <a href="">T11</a> 
 
     <ul> 
 
      <li class="menu-item"><a href="">T111</a></li> 
 
      <li class="menu-item"><a href="">T112</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="menu-item"><a href="">T12</a></li> 
 
     <li class="menu-item"><a href="">T13</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <a href="">T 2</a> 
 
    </li> 
 
</ul>

例えば、私は李子供たちのli親セットのアクティブクラスをクリックし

Answer 1

あなたはaタグでイベントclickを検出することができます。

$('#mobile-advanced li.menu-item-has-children a').on('click', function() { 
 
    $(this).parent().toggleClass('active'); 
 
}); 
 

 
// just for test 
 
$('a').on('click', function (e) { 
 
    e.preventDefault() ; 
 
});

li.active{ 
 
    background-color: #FFB94B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="mobile-advanced"> 
 
      <li class="menu-item menu-item-has-children"> 
 
       <a href="">T 1</a> 
 
       <ul> 
 
        <li class="menu-item menu-item-has-children"> 
 
         <a href="">T11</a> 
 
         <ul> 
 
          <li class="menu-item"><a href="">T111</a></li> 
 
          <li class="menu-item"><a href="">T112</a></li> 
 
         </ul> 
 
        </li> 
 
        <li class="menu-item"><a href="">T12</a></li> 
 
        <li class="menu-item"><a href="">T13</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="menu-item"> 
 
       <a href="">T 2</a> 
 
      </li> 
 
     </ul>

Answer 2

はあなただけを変更したい要素に別のクラスを追加する必要があります。私の場合は、 "active-this"というantherクラスを定義し、このクラスにjquery関数を適用します。例に従ってください：

$('.active-this').on('click', function() { 
    $(this).toggleClass('active'); 
}); 

// just for test 
$('a').on('click', function (e) { 
    e.preventDefault() ; 
}); 



li.active{ 
    background-color: #FFB94B; 
} 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<ul id="mobile-advanced"> 
     <li class="menu-item menu-item-has-children"> 
      <a href="">T 1</a> 
      <ul> 
       <li class="menu-item menu-item-has-children"> 
        <a href="">T11</a> 
        <ul> 
         <li class="menu-item active-this"><a href="">T111</a></li> 
         <li class="menu-item active-this"><a href="">T112</a></li> 
        </ul> 
       </li> 
       <li class="menu-item active-this"><a href="">T12</a></li> 
       <li class="menu-item active-this"><a href="">T13</a></li> 
      </ul> 
     </li> 
     <li class="menu-item"> 
      <a href="">T 2</a> 
     </li> 
    </ul> 

Answer 3

あなたは親li要素を除くliメニュー項目をクリックできるようにするには、以下のセレクタを使用することができます。予想通り

$('#mobile-advanced li.menu-item').not(".menu-item-has-children")

$('#mobile-advanced li.menu-item').not(".menu-item-has-children").on('click', function (e) { 
 
\t e.preventDefault(); 
 
\t $(this).toggleClass('active'); 
 
}); 
 

 
$(".menu-item-has-children").on('click', function(e){ 
 
\t e.preventDefault(); 
 
})

li.active { 
 
\t background-color: #FFB94B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<ul id="mobile-advanced"> 
 
\t <li class="menu-item menu-item-has-children"> 
 
\t \t <a href="">T 1</a> 
 
\t \t <ul> 
 
\t \t \t <li class="menu-item menu-item-has-children"> 
 
\t \t \t \t <a href="">T11</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li class="menu-item"> 
 
\t \t \t \t \t \t <a href="">T111</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li class="menu-item"> 
 
\t \t \t \t \t \t <a href="">T112</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <li class="menu-item"> 
 
\t \t \t \t <a href="">T12</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="menu-item"> 
 
\t \t \t \t <a href="">T13</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <li class="menu-item"> 
 
\t \t <a href="">T 2</a> 
 
\t </li> 
 
</ul>