Bootstrap Dropdown Toggle Icon issue

Question

Я использую Twitter Bootstraps «выпадающее меню» на WordPress для некоторого виджета, который я создал, и он отлично работает. Но я хочу изменить значок на «минус», когда он отбрасывает содержимое, и когда нажимается другой «плюс» -icon, «минус» должен закрываться. На данный момент он будет только переключать текущий «плюс».

<div class="dropdown toggle-details"> 
    <img src=""> 
    <h3>title</h3> 
    <h4><subtitle</h4> 
    <a class="dropdown-toggle my-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a> 
     <ul class="dropdown-menu" > 
     <li> <h6>item 1</h6></li> 
     <li><h6>item 2</h6></li> 
    </ul> 
</div> 

мой сценарий

jQuery('a').click(function() { 
jQuery(this).find('i').toggleClass('fa-minus-circle'); 
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')}); 

Answer 1

Вы пропустили точку в вашем JQuery, так что сейчас JQuery ищет HTML-элемент с именем тега фа-минус-круг в «а» элемент. И, очевидно, не найти его.

jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')... 

Фактически это, вероятно, тоже не исправит, потому что после этого утверждения вы получите оба класса в элементе i. Я думаю, вы могли бы обойти это с помощью css, но более чистым было бы, чтобы элемент «i» по умолчанию был + значком, а затем переключил более семантическое имя класса, например «open».

Так CSS:

i { /* show plus icon */ } 
i.open { /* show minus icon */ } 

И JQuery:

jQuery("a").on("click", function() { 
    jQuery(this).find("i").toggleClass("open"); 
}); 

Хех - теперь, когда я только что напечатал все, что я вижу, что вы делаете с этим вторым утверждением. Так что да, вам просто нужна точка, поэтому jquery ищет имя класса, а не элемент.