Question

我有一个带有标题的基本列表。在理想环境中，当用户单击标题或嵌套图标时，将显示描述性段落，并且图标会更改。如果用户按标题逐个标题打开和关闭，然后再继续前进，那没有问题，但是打开并移动以打开下一个标题，事情就会变得很奇怪和很麻烦。段落将切换，但图标保持不变。

单击完美的世界场景，标题或img，图标变为减号，然后显示段落，段落保持打开状态，单击下一个标题，段落和图标更改，依此类推。一遍又一遍地进行重复处理，我无所适从。

$(".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将检查类是否为..您可以使用!$(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"

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

1 个答案: