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/ – 2013-03-04 12:33:31

你并不需要使用find这一点。

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

编辑：使用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只针对正在切换的特定滑块。有没有办法使用.find使用toggleClass？ – 2013-03-04 12:28:52

使用查找应该工作正常在这种情况下给出的要求 – 2013-03-04 12:36:05

谢谢马克。但似乎并没有这样做，至少与我上面阐述的不同。 – 2013-03-04 12:38:21

给你的类中的一些布局和一些内容：

.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无法在滑块上工作

回答

相关问题