JQuery/JS onclick изменить класс элемента внутри ссылки щелкнули

Question

У меня есть несколько выпадающих списков с использованием бутстрапа, и я хочу создать код в простой функции, чтобы изменить класс элемента span внутри ссылки, которая нажата.

Для уточнения ... Вот пример HTML у меня есть:

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" 
    onclick="toggleIcon()"> 
    <span class="glyphicon glyphicon-knight"></span> 
    Drop Down Title 
    <span class="glyphicon glyphicon-triangle-bottom"></span> 
</a> 
<div class="collapse" id="collapse-panel"> 
    <!-- content --> 
</div> 

Ищу функции (с помощью JS или JQuery), который может переключать второй класс диапазона для переключения между glyphicon glyphicon-triangle-bottom и glyphicon glyphicon-triangle-top ,

Помните, что эта функция должна работать для нескольких выпадающих списков. Любая помощь приветствуется.

Answer 1

$('a[data-toggle="collapse"]').click(function(){ 
$(this).find('.glyphicon-triangle-bottom, .glyphicon-triangle-top').toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom'); 
}); 

удалить Также onclick="toggleIcon()"

Это должно работать для всех тегов привязки, которые имеют data-toggle="collapse" атрибут.

Answer 2

$(function(){ 
 
    $('#checkcls').click(function(){ 
 
    
 
    if($('#tglcls').hasClass('glyphicon-triangle-bottom')){ 
 
    $('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top'); 
 
    //to check class 
 
    alert($("#tglcls").attr('class')); 
 
    } 
 
    else{ 
 
     $('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top'); 
 
    //to check class 
 
    alert($("#tglcls").attr('class')); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'> 
 
    <span class="glyphicon glyphicon-knight"></span> 
 
    Drop Down Title 
 
    <span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span> 
 
</a> 
 
<div class="collapse" id="collapse-panel"> 
 
    <!-- content --> 
 
</div>

Надеется, что это помогает.

Answer 3

довольно прост - лучше использовать $ .click функции() и получить ваши классы права:

<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false"> 
<span class="glyphicon glyphicon-knight"></span> 
Drop Down Title 
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span> 
</a> 
<div class="collapse" id="collapse-panel"> 
<!-- content --> 
</div> 

То, что я здесь был добавить класс тумблера значка к верхней ссылке, и класс иконописец тумблера к размаху glyphicon ..., ИСЫ выглядят следующим образом:

// On Toggle-Icon Click 
$('.toggle-icon').click(function(){ 
// Set Icon To toggle in function 
var IconToToggle = $(this).find('.icon-toggle'); 
// If the icon is the bottom icon 
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) { 
// Change the icon to the top icon 
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top'); 
// Otherwise 
} else { 
// Change the top icon to the bottom icon 
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom'); 
} 
}) 

Аннотация добавила, так что вы можете прочитать код лучше. Надеюсь это поможет!

https://jsfiddle.net/khxehd05/

Answer 4

До сих пор ответы здесь я хотел бы рассмотреть только мягко-ки (по моему скромному мнению). Найдите минутку и читать:

Decoupling Your HTML, CSS, and JavaScript

Я хотел бы изменить некоторые вещи, чтобы сделать его действительно читаемым и ремонтопригодны:

Html:

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"> 
    <span class="glyphicon glyphicon-knight"></span> 
    Drop Down Title 
    <span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span> 
    <span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span> 
</a> 
<div class="collapse" id="collapse-panel"> 
<!-- content --> 
</div> 

CSS:

[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{ 
    display: none; 
} 

[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{ 
    display: none; 
} 

Working JsFiddle Example

1. Настоятельно рекомендую избегать любой ценой, используя встроенные функции. (onclick="toggleIcon()")
2. Воспользуйтесь CSS и тем, что Bootstrap уже делает, просто написав html и css только!
3. Полностью многоразовый, неважно, какие глифы вы используете, не требует javascript, ничто не жестко закодировано с точки зрения событий или классов.