javascript - toggleClass 在滑块上不起作用

Question

我正在尝试使用 .toggleClass 更改链接上的类，以便在切换打开/关闭时将背景图像从加号交换为减号。它似乎引用了正确的代码片段，正如我在 Firebug 中看到的那样，它试图更改类，但实际上并没有发生更改。这是我拥有的代码：

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

您能提供的任何帮助将不胜感激！

谢谢！

杰米

Answer 1

给你的班级一些布局和一些内容：

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

和一个固定的空间：

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

Answer 2

你不需要为此使用find。

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

编辑：使用nextandclosest代替

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