jquery - 仅在其下方的 div 中将类切换为元素

Question

这是为了:

https://josh-unger-mzr3.squarespace.com

我有两个导航文件夹，左侧导航中的页面位于它们下方。文件夹内的页面标题具有以下 css:

.main-nav .subnav ul {display:none;
transition: all 100ms ease-in-out;

}
.main-nav .subnav ul.expand {
display: block;
}

我有 jquery 来切换将在点击时显示标题的 .expand 类:

<script>
$(document).ready(function(){

$(".main-nav li.folder").click(function(){
   $
$(".main-nav .subnav ul").toggleClass("expand");
 });
 });
   </script>

我希望只显示被单击元素的文件夹，而不是所有文件夹。

谢谢。

Answer 1

您的代码正在对 .subnav 类的所有元素执行点击功能。你几乎达到了你的目标。您必须使用 $(this) 而不是在所有类上扩展(/切换 css)。

我的示例使用它并搜索它的所有“.subnav ul”，然后切换 css。

$(".main-nav li.folder").click(function(){
   $(this).find('.subnav ul').toggleClass("expand");
});