Toggle-Klasse innerhalb Anker

Question

Ich versuche, ein dynamisches Toggle für ein Dropdown-Menü mit der Schriftart awesome Set erstellen. Hier ist mein 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> 

und die js Ich habe bisher:

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

Allerdings, wenn ich es klicken, passiert nichts. Irgendeine Idee warum?

Answer 1

Das Problem ist mit dem Selektor. Fügen Sie ein #:

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

Der Selektor Sie ein Tag-Selektor hatte, war, mit dem Namen contis, die <contis> ausgewählt hätte und nichts mit id="contis". Für id Selektor müssen Sie #contis verwenden, die die richtige auswählen wird.

Es gibt auch keinen direkten Nachkommen, also entfernen Sie >.

Snippet

$(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>

Bitte ändern Sie Ihre classfas-fa.