Question

我正在尝试为多个div创建slideToggle，但是我必须做错了什么，因为它不起作用。当我单击按钮时，隐藏的内容不显示。另外，我希望按钮在显示内容时使用↑。

$(document).ready(function() {
  $(".show_hide").click(function() {
    $(this).parent(".title").next(".toggle").slideToggle();
  });
});

.toggle {
  display: none;
}

.show_hide {
  margin-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="title">Heading 1<button class="show_hide" type="button">&#8593;</button></h2>
<div class="toggle">
  <p>content goes here</p>
</div>
<h2 class="title">Heading 2<button class="show_hide" type="button">&#8593;</button></h2>
<div class="toggle">
  <p>content goes here</p>
</div>
<h2 class="title">Heading 3<button class="show_hide" type="button">&#8593;</button></h2>
<div class="toggle">
  <p>content goes here</p>
</div>

https://jsfiddle.net/ucx4asm2/

Answer 1

您尚未通过将库添加到您的代码中来将jQuery库添加到jsfiddle中。

如果您希望在单击时更改按钮的箭头，可以将.text（）方法与三元语句一起使用，请尝试查看它是否正是您想要的。

$(document).ready(function(){
$(".show_hide").click(function(){
    $(this).parent(".title").next(".toggle").slideToggle();
    $(this).text(function(i, text){
      return text === "↓" ? "↑" : "↓";
    });
  });
});

https://jsfiddle.net/bgufwn5c/7/

如何切换多个div？

1 个答案: