我不是JQuery的专家,所以在这里。我有一个看起来像这样的HTML:
<ul class="first-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
</ul>
所以我想做的是,当我按下+符号(fa fa-plus)来切换其子目录时。此时,当我按下+号时,所有子目录都被切换。 我该如何重写此jquery代码以实现该目标?
如果我按第一个+号,则按下一个+,只有下一个子目录应打开。然后,当我按下子目录时,下一个子目录应打开,依此类推。这也适用于结束部分。
JQUERY 当前我有这个:
$(document).ready(function(){
$(".first-class .second-class").click(function(e){
$(".subdirectory-class", this).first().slideToggle("fast");
$(this).children("a").toggleClass("closed open");
e.preventDefault();
});
});
这会隐藏每个ul接受的主菜单(css display:none),当我按它时,它将切换所有子目录。
任何帮助将不胜感激。
预先感谢
答案 0 :(得分:3)
如果将e.stopImmediatePropagation()
添加到代码中,它将按您期望的方式运行。
$(document).ready(function() {
$(".second-class").click(function(e) {
$(this).find(".subdirectory-class").first().slideToggle("fast");
$(this).children("a").toggleClass("closed open");
e.stopImmediatePropagation()
});
});
演示
$(document).ready(function() {
$(".second-class").click(function(e) {
$(this).find(".subdirectory-class").first().slideToggle("fast");
$(this).children("a").toggleClass("closed open");
e.stopImmediatePropagation()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-class">
<li class="second-class">
<a href="#_">1
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">11
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">111
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="second-class">
<a href="#_">2
<i class="fa fa-plus"></i>
</a>
<ul class="subdirectory-class">
<li class="second-class">
<a href="#_">22
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
</ul>