toggleClass не работает на слайдере

Я пытаюсь использовать .toggleClass, чтобы изменить класс по ссылке, чтобы поменять фоновое изображение с плюса на минус, когда переключатель открыт/закрыт. Кажется, он ссылается на правильный фрагмент кода, как я вижу в Firebug, что он пытается изменить класс, но это на самом деле не происходит. Вот код, который у меня есть:toggleClass не работает на слайдере

<div class="slide-click-container"> 
<a href="#" class="slide-click-link"> 
    Click here to expand/contract 

    <span class="control-arrow"><!-- PLUS/MINUS SIGN BACKGROUND IMAGE HERE --></span> 
</a> 

<div class="slider hide"> <!-- HIDE CLASS SETS DIV TO DISPLAY:NONE --> 
    Content here 
</div> 
</div> 

<script type="text/javascript"> 

$(".slide-click-container").click(function(ev){ 
ev.preventDefault(); 
$(this).find(".slider").slideToggle('slow'); 
$(this).find(".control-arrow").toggleClass('open'); 
}); 

</script>

Любая помощь, которую вы можете предоставить, будет принята с благодарностью!

Спасибо!

Джейми

источник

2013-03-04 Jamie H

Вы уверены, что ваш элемент .control-arrow имеет ширину? например, с помощью css, аналогичного: '.control-arrow {width: 14px; Дисплей: встроенный блок; } 'Я проверил ваш код с этим css и, похоже, работает тогда. http://jsfiddle.net/nX7J5/ –

Вам не нужно использовать find для этого.

$(".slide-click-container").click(function(ev){ 
    ev.preventDefault(); 
    $(".slider").slideToggle('slow'); 
    $(".control-arrow").toggleClass('open'); 
});

EDIT: Используйте next и closest вместо

$(".slide-click-container").click(function(ev){ 
    ev.preventDefault(); 
    $(this).parent().next().slideToggle('slow'); 
    $(this).closest(".control-arrow").toggleClass('open'); 
});

источник

2013-03-04 12:17:06 Asdine

Спасибо за ваш ответ, Асдин. Я вижу, что теперь он работает с find, но, к сожалению, у меня есть несколько таких слайдеров на странице, поэтому я использую .find, чтобы ориентироваться только на определенный слайдер, который переключается. Есть ли способ использовать toggleClass с .find? –

с использованием find должно работать нормально в этом случае с учетом требования –

Спасибо, Марк. Похоже, что это не так, хотя, по крайней мере, не с тем, как я изложил это выше. –

Дайте ваш класс некоторое расположение и некоторое содержание:

.control-arrow { 
    width:14px; 
    display:inline-block; 
}

и фиксированное пространство:

<span class="control-arrow">&nbsp;<!-- PLUS/MINUS SIGN BACKGROUND IMAGE HERE --></span>

источник

2013-03-04 12:37:59

toggleClass не работает на слайдере

ответ

Смежные вопросы