アンカーの内部でクラスを切り替えます

Question

フォントの素晴らしいセットを使用してドロップダウンのための動的なトグルを作成することをトグルしようとしています。ここに私のhtmlだ：

<div id="contis" class="row"> 
    <div class="container contis"> 
     <div class="minispc"></div> 

     <a href="#service1" data-toggle="collapse"><i class = "fas fa-chevron-right"></i> Service 1</a> 
     <div class="col"> 
     <div class="row"> 
      <div class="col"> 
      <div class="collapse" id = "service1"> 
       <li>Item 1</li> 
       <li>Item 2</li> 
      </div> 
      </div> 
     </div> 
     </div> 

    </div> 
</div> 

と私がこれまで持っているJS：私はそれをクリックしたときに

$('contis > a').click(function() { 
    $('i', this).toggleClass('fa-chevron-right fa-chevron-down'); 
}); 

しかし、何も起こりません。どんな考え？

Answer 1

問題はセレクタにあります。追加#：

$('#contis a').click(function() { 
    $('i', this).toggleClass('fa-chevron-right fa-chevron-down'); 
}); 

あなたは<contis>とid="contis"ではない何かを選択しているだろうcontisという名前のタグセレクタ、だったセレクタ。 idセレクタの場合は、#contisを使用する必要があります。これは適切なセレクタを選択します。

また、直接の子孫はありませんので、>を削除してください。

スニペット

$(function() { 
 
    $('#contis a').click(function() { 
 
    $('i', this).toggleClass('fa-chevron-right fa-chevron-down'); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contis" class="row"> 
 
    <div class="container contis"> 
 
    <div class="minispc"></div> 
 
    <a href="#service1" data-toggle="collapse"><i class="fa fa-chevron-right"></i> Service 1</a> 
 
    <div class="col"> 
 
     <div class="row"> 
 
     <div class="col"> 
 
      <div class="collapse" id="service1"> 
 
      <li>Item 1</li> 
 
      <li>Item 2</li> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

faにfasからあなたclassを変更してください。