Question

我试图通过单击另一个元素来对一个元素做一个简单的toggleClass。同一类有多个元素，我只想切换同级/最接近的同级。我相信我从根本上弄错了针对父母/子女/兄弟姐妹的概念。非常感谢您的协助。

当前进度：

$(".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

...只有同级/最接近的一个...

如果您的意思是真正的兄弟姐妹（同父），则将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>

Answer 2

我将在每个列表中安装一个代理侦听器，而不是在每个切换按钮上注册一个单击事件侦听器。该列表捕获了点击事件，因为默认情况下，点击事件在DOM中冒泡。在点击侦听器内部，我检查点击目标是否为select y.y, v.m, max(t.qty_ytd) over (partition by y.y order by v.m) as qty_ytd from (select distinct year from t) y cross join (values (1), (2), (3), (4), . . . (12)) v(m) left join t on t.year = y.year and t.month = v.m;，如果是，则找到第一个与点击元素共享父元素的.toggle-btn。

因为与任何库用法相比，我都更倾向于使用香草Javascript，所以下面是一个很好的老式Java Script中的示例：

.content.collapsible

const toggleLists = document.querySelectorAll('.toggleList');

for (const toggleList of toggleLists) {
  toggleList.addEventListener('click', (event) => {
    // make sure you only handle those clicks you want
    if (event.target.classList.contains('toggle-btn')) {
      event.target.parentElement.querySelector('.content.collapsible').classList.toggle('collapsed');
    }
  })
}

.content {
  transition: max-height 0.3s ease-in-out;
  height: auto;
  max-height: 3000px;
  overflow: hidden;
}

.content.collapsed {
  max-height: 0;
}

.toggleList { list-style-type: none; padding: 0; }

在单击同一级别的元素（同级？）时切换一个类，但不要在同一级别的其他元素上切换

2 个答案: