Question

我正在尝试制作一支手风琴，我每行都使用相同的类。像这样。

$(document).ready(function() {
  $(".faq-article").click(function() {
    $(".faq-details").toggle();
  })
});

.faq-details {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
  <div class="faq-article">
    <div class="title-faq">Question 1</div>
    <div class="faq-details">answer</div>
  </div>
  <div class="faq-article">
    <div class="title-faq">Question 2</div>
    <div class="faq-details">answer 2</div>
  </div>
</div>

我不记得在点击第一个问题标题时如何阻止显示所有faq-details。

Answer 1

您需要使用this作为搜索.faq-details元素的上下文。

$(document).ready(function() {
  $(".faq-article").click(function() {
    $(".faq-details", this).toggle();
  })
});

.faq-details {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
  <div class="faq-article">
    <div class="title-faq">Question 1</div>
    <div class="faq-details">answer</div>
  </div>
  <div class="faq-article">
    <div class="title-faq">Question 2</div>
    <div class="faq-details">answer 2</div>
  </div>
</div>

Answer 2

由于有多个元素具有类faq-article，因此在该类上实现toggle()时，所有元素都会受到影响。要获取当前单击的元素，您必须通过指定this来定位click事件的当前上下文。

更改 $(".faq-details").toggle();

要

$(this).find(".faq-details").toggle(); 或 $(".faq-details", this).toggle();

＆＃13;

$(document).ready(function() {
  $(".faq-article").click(function() {
    $(this).find(".faq-details").toggle();
  })
});

＆＃13;

.faq-details {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
  <div class="faq-article">
    <div class="title-faq">Question 1</div>
    <div class="faq-details">answer</div>
  </div>
  <div class="faq-article">
    <div class="title-faq">Question 2</div>
    <div class="faq-details">answer 2</div>
  </div>
</div>

＆＃13;

Javascript切换打开所有div

2 个答案: