javascript - 单击同一级别的元素(兄弟？)切换类，但不要切换具有相同类的其他元素

Question

我正在尝试通过单击另一个元素对一个元素执行一个简单的 toggleClass。有多个元素具有相同的类，我只想切换同级/最近的元素。我相信我从根本上理解了针对 parent / child / sibling 的概念是错误的。非常感谢任何帮助。

目前进展:

$(".toggle-btn").click(() => {
  $(".content.collapsible").toggleClass("collapsed");
});

.content {
  transition: max-height 0.3s ease-in-out;
  height: auto;
  max-height: 3000px;
  overflow: hidden;
}

.content.collapsed {
  max-height: 0;
}

ul { list-style-type: none; padding: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <a href="#" class="label toggle-btn">Test Button 1</a>
    <div class="content collapsible">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

    </div>
  </li>

  <li class="dropdown">
    <a href="#" class="label toggle-btn">Test Button 2</a>
    <div class="content collapsible">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

    </div>
  </li>

  <li class="dropdown">
    <a href="#" class="label toggle-btn">Test Button 3</a>
    <div class="content collapsible">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

    </div>
  </li>

  <li class="dropdown">
    <a href="#" class="label toggle-btn">Test Button 4</a>
    <div class="content collapsible">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

    </div>
  </li>

  <li class="dropdown">
    <a href="#" class="label toggle-btn">Test Button 5</a>
    <div class="content collapsible">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

    </div>
  </li>
</ul>

目前这是在所有元素上切换类:

$(".toggle-btn").click(() => {  
   $(".content.collapsible").toggleClass("collapsed");
});

我尝试了几种不同的方法来修改片段以解决我的问题。我在提供的 codepenn 中留下了一些注释掉的尝试。

Answer 1

...only the sibling / closest one...

如果你真的是指 sibling (同父异母)，那么使用带有选择器过滤器的siblings，并且不要使用箭头函数(这样jQuery可以控制this 在处理程序回调期间):

$(".toggle-btn").click(function() {  
   $(this).siblings(".content.collapsible").toggleClass("collapsed");
});

实例:

$(".toggle-btn").click(function() {  
   $(this).siblings(".content.collapsible").toggleClass("collapsed");
});

.content {
    transition:max-height 0.3s ease-in-out;
    height:auto;
    max-height:3000px;
    overflow: hidden;
  }

  .content.collapsed {
    max-height:0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="dropdown"> 
  <a href="#" class="label toggle-btn">Test Button 1</a>
  <div class="content collapsible"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
    
  </div>
</li>

<li class="dropdown"> 
  <a href="#" class="label toggle-btn">Test Button 2</a>
  <div class="content collapsible"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
    
  </div>
</li>

<li class="dropdown"> 
  <a href="#" class="label toggle-btn">Test Button 3</a>
  <div class="content collapsible"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
    
  </div>
</li>

<li class="dropdown"> 
  <a href="#" class="label toggle-btn">Test Button 4</a>
  <div class="content collapsible"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
    
  </div>
</li>

<li class="dropdown"> 
  <a href="#" class="label toggle-btn">Test Button 5</a>
  <div class="content collapsible"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
    
  </div>
</li>
</ul>