Question

点击标题类时，我有一个jQuery来切换内容。

 $(".heading").click(function(){
     $(this).next("div").slideToggle(500);
     $(this).toggleClass("close-icon open-icon");
});

幻灯片切换工作正常，直到我添加了切换类行以显示指示切换是打开还是关闭的图像。现在，.heading的显示正在与div一起切换。

我能够通过将toggleClass行更改为

来解决此问题

$(".close-icon, .open-icon").toggleClass("close-icon open-icon");

但是我有多个标题类，因此不使用$（this），图像将在所有标题上更改，而不仅仅是正在按下的标题。

<div class="heading">
    <h1>Projects</h1>
    <span class="close-icon">
    </span>
</div>

<div class="flexslider">

</div>

<div class="heading">
     <h1>About</h1>
     <span class="close-icon">
     </span>
</div>

<div class="about">

</div>

<div class="heading">
      <h1>Contact</h1>
      <span class="close-icon">
      </span>
</div>

<div class="contact">

</div>

Answer 1

您似乎将click事件添加到div中，但close-icon类位于div内的span上。

尝试以下方法：

$(".heading").click(function(){
     $(this).next("div").slideToggle(500);
     $(this).find('span').toggleClass("close-icon open-icon");
});

单击jQuery幻灯片切换隐藏错误元素

1 个答案: