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

我有一个jQuery，可以在单击heading类时切换内容

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

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

我可以通过将toggleClass行更改为

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

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

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

项目
关于
接触

看起来您正在将click事件添加到div中，但是close icon类驻留在div中的span上

请尝试以下操作：

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

---

如果您共享HTMl或更好地制作JS Fiddle，这将有助于我们的帮助您是否只想切换span类