如何使用slidetoggle()定位当前部分，使所有其他部分打开

Question

我在paage上有多个 sectiondiv。我正在使用一种简单的方法打开和关闭部分。我使用的是slideToggle()，并且运行良好，但是现在我遇到了问题，试图仅找到该部分用户单击以关闭 - 而不是一次。

。

$(".section_accordian_trigger").click(function(){
            //open container and not all containers at once
            $(this).find(".section_container").slideToggle("slow", function(){});
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
        <div class="section_accordian_trigger">click</div>
        <div class="section_container">
            content of section is here
        </div>
    <section>
    <section>
    <div class="section_accordian_trigger">click</div>
        <div class="section_container">
            content of section is here
        </div>
    <section>
    <section>
    <div class="section_accordian_trigger">click</div>
        <div class="section_container">
            content of section is here
        </div>
    <section>
    <section>
    <div class="section_accordian_trigger">click</div>
        <div class="section_container">
            content of section is here
        </div>
    <section>

因此，结构是我们有一个section，在内部我们有一个触发点击事件的DIV，然后我们有一个称为section_container的DIV，该DIV保留了我们希望显示和隐藏的内容。我一直在玩定位$(this)（即.section_accordian_target元素单击），找到section_container类，然后打电话给slideToggle，但这似乎一次仍然关闭所有元素。任何帮助将不胜感激。

Answer 1

您需要使用 .next()立即定位兄弟姐妹。.find()目标后代元素

$(this).next(".section_container").slideToggle();

$(".section_accordian_trigger").click(function() {
  //open container and not all containers at once
  $(this).next(".section_container").slideToggle("slow", function() {});
});

.section_container {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="section_accordian_trigger">click</div>
  <div class="section_container">
    content of section is here
  </div>
  <section>
    <section>
      <div class="section_accordian_trigger">click</div>
      <div class="section_container">
        content of section is here
      </div>
      <section>
        <section>
          <div class="section_accordian_trigger">click</div>
          <div class="section_container">
            content of section is here
          </div>
          <section>
            <section>
              <div class="section_accordian_trigger">click</div>
              <div class="section_container">
                content of section is here
              </div>
              <section>

Answer 2

使用.next()，因为.section_container不是.section_accordian_trigger

的孩子

演示

$(".section_accordian_trigger").click(function() {
  //open container and not all containers at once
  $(this).next(".section_container").slideToggle("slow", function() {});
});

.section_container {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="section_accordian_trigger">click</div>
  <div class="section_container">
    content of section is here
  </div>
  <section>
    <section>
      <div class="section_accordian_trigger">click</div>
      <div class="section_container">
        content of section is here
      </div>
      <section>
        <section>
          <div class="section_accordian_trigger">click</div>
          <div class="section_container">
            content of section is here
          </div>
          <section>
            <section>
              <div class="section_accordian_trigger">click</div>
              <div class="section_container">
                content of section is here
              </div>
              <section>