仅在其下方的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的所有元素执行单击功能。你几乎达到了你的目标。而不是在所有类上扩展（/切换css），你必须使用$（this）。

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

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