手风琴样式列表添加和删除class问题

Question

我有一个带标题的基本列表。在一个完美的世界中，当用户单击标题或嵌套图标时，会显示一个描述性段落并且图标会发生变化。如果用户逐个标题，在继续之前打开和关闭则没有问题，但是打开并移动以打开下一个并且事情变得奇怪和错误。段落将切换，但图标保持不变。

完美世界场景，点击标题或img，图标变为减号显示段落，段落保持打开状态点击下一个标题，段落和图标变化等等。哈希和 re-hashed 一遍又一遍，我不知所措。

$(".hold-text").click(function() {
  if (!$("img").hasClass("foo")) {
    $(this).find(".title").children("img").attr("src", "minus-icon.png").addClass("foo");
    $(this).children("p").toggle();
  } else {
    $(this).find(".title").children("img").attr("src", "plus-icon.png").removeClass("foo");
    $(this).children("p").toggle();
  }
});

.hold-text>p {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
</ul>

Answer 1

!$("img").hasClass 将检查带有 class 的任何图像 .. 您可以使用 !$(this).find("img").hasClass 而不是使用 if 语句，您可以使用 .toggleClass() .. 请参阅下一个例子

$(".hold-text").click(function() {
  var Getimage = $(this).find("img");         //Get the Image
  Getimage.attr("src", Getimage.attr('src') == "minus-icon.png" ? "plus-icon.png" : "minus-icon.png").toggleClass("foo");  // toggle between image src and toggle the class
  $(this).find("p").toggle();  // toggle p
  console.log(Getimage.attr('src'));   // Just to check the src is changed
});

.hold-text>p {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
</ul>

解释： Getimage.attr('src') == "minus-icon.png" ? "plus-icon.png" : "minus-icon.png" 这行表示如果图像 src 是 "minus-icon.png" 更改为 "plus-icon.png" 否则 "minus-icon.png"

手风琴样式列表添加和删除class问题

Accordion style list add and remove class problem

jquery

jquery-ui