2017-02-16 20 views
2

私は同じクラスの複数のdivを持っています。クリック機能を使って、それぞれの子どもたちのクラスを個別に切り替えることができるようにしたい。直接子供のクラスを切り替えます

if($("div").hasClass("subLinkPage")) { 
    $(".sub-expand_collapse").children(".fa").toggleClass('fa-minus fa-plus'); 
} 

このスクリプトに追加する内容は、それぞれの直下の子のみです。任意の提案のための

おかげ

HTML

<div class="subLinkPage"> 
    <ul aria-labelledby="headLnk_02" class="nav__items"> 
     <li class="sub_p01 togSubList"> 

      <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu"> 
       <i class="fa fa-plus" aria-hidden="true"></i> 
      </a> 

      <a id="subLnk_01" class="parent_link menu_p01" href="../content/m04/m04_c02_p01.html">Facebook feed</a>    
      <ul class="sub_items sub_items_01"> 
       <li><a href="../content/m04/m04_c02_p01-a.html" class="menu_p01a">Adding a Facebook feed<br/>to the home page</a></li> 
      </ul> 
     </li> 
     <li class="sub_p02 togSubList"> 


      <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu"> 
       <i class="fa fa-plus" aria-hidden="true"></i> 
      </a> 

      <a id="subLnk_02" class="parent_link menu_p02" href="../content/m04/m04_c02_p02.html">Twitter feed</a>    
      <ul class="sub_items sub_items_02"> 
       <li><a href="../content/m04/m04_c02_p02-a.html" class="menu_p02a">Adding a Twitter<br/>feed web part</a></li> 
      </ul> 
     </li>  
    </ul> 
</div> 
+1

を直接の子を使用することができ、いくつかのHTML構造を提供し、それはあなたが「クリック」イベントをチェックしたいと思いますどの要素にはそれほど明確ではありませんしてください。 – Dekel

+0

'.sub-expand_collapse'の直接の子ではない' .fa'要素はありません。それはどの要素がそれをすべきではないとトグルしていますか? – Barmar

+0

HTMLを追加するだけでは不十分です。どの要素をクリックしていますか、どの要素をクリックするか、どの要素を切り替えるべきですか? – Barmar

答えて

1

あなたはjQueryのselector(parent > child)

$("div.subLinkPage").on('click', function() { 
    $(this).find(".sub-expand_collapse > .fa").toggleClass('fa-minus fa-plus'); 
}); 
+0

あなたは本当に私がこれを考えるのを助けています –

+0

'.filter'は必要ありません。セレクタ' $( "div.subLinkPage") ' – Barmar

0

それは.clickイベント内なら、あなたは$("MyElement > MyElementsChild").remove();
">" の状態のようなものを行うことができます代わりに$(".sub-expand_collapse")

+0

申し訳ありません私にとっては役に立ちません –

+0

クリックイベントのコードを表示 – jake2389

0

$(this)を使用それは子供の要素だということです。

+0

これはまだ.sub-expand_collapseが適用されているすべての子に影響を与えます –

+0

@LaurenceL '>' CSS演算子はすべての子ではなく直下の子にのみ一致します。これはうまくいくはずです。あなたの質問をHTMLで更新し、影響を受けたい要素を明確に説明してください。 – Barmar

+0

問題はありません –

関連する問題