将 class 切换为仅在其下方 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 class:

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

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

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

谢谢。

Answer 1

您的代码正在对 class.subnav 的所有元素执行点击功能。你几乎达到了你的目标。您必须使用 $(this).

而不是在所有 class 上展开（/切换 css）

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

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

将 class 切换为仅在其下方 div 中的元素

toggle class to element only in div below it

css

jquery

toggle

squarespace