Question

我已经实施了切换事件，但它无法正常工作。

如果我点击其中一个图像，每个类切换，我只想切换活动类。

<script>
            $("#img-01").click(function () {
                $(".crp-list").toggle();
            });
            $("#img-02").click(function () {
                $(".crp-list").toggle();
            });
            $("#img-03").click(function () {
                $(".crp-list").toggle();
            });
</script>

这是我的HTML代码..

 <div class="toggle-content">
      <img src="Images/icon.png" alt="" id="img-01" />
          <ul class="crp-list" style="display: none">
             <li class="content-one comments hidden">
                  Content 1
             </li>

         </ul>
  </div>

 <div class="toggle-content">
      <img src="Images/icon.png" alt="" id="img-02" />
          <ul class="crp-list" style="display: none">
             <li class="content-one comments hidden">
                  Content 3
             </li>

         </ul>
  </div>

 <div class="toggle-content">
      <img src="Images/icon.png" alt="" id="img-03" />
          <ul class="crp-list" style="display: none">
             <li class="content-one comments hidden">
                  Content 3
             </li>

         </ul>
  </div>
</html>

Answer 1

您可以使用 attrribute starts with 选择器缩短代码，并使用$(this)和 .next() 仅定位下一个点击图片的直接兄弟，.crp-list列表：

$('[id^="img-"]').click(function() {
    $(this).next().toggle();
});

Answer 2

您需要使用

$(this).next(".crp-list").toggle();

而不是

$(".crp-list").toggle();

此外，您的代码可以优化为

$("#img-01, #img-02, #img-03").click(function () {
    $(this).next(".crp-list").toggle();
});

但是，我建议给图像提供一个公共类，然后使用类选择器绑定事件。喜欢

HTML 的

<img class="image" src="Images/icon.png" alt="" id="img-01" />
<img class="image" src="Images/icon.png" alt="" id="img-02" />
<img class="image" src="Images/icon.png" alt="" id="img-03" />

JS

$(".image").click(function () {
    $(this).next(".crp-list").toggle();
});

Answer 3

$("#img-01, #img-02, #img-03").click(function () {
    $(this).next(".crp-list").toggle();
});

Answer 4

$(".toggle-content img").click(function () { 
   $(this).next('ul').toggle();
});

现在您可以通过单行代码

来完成此操作

多个切换无法正常工作

4 个答案: