我不是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),当我按下它时,它会切换所有子目录。
任何帮助将非常感激。
提前致谢
如果你将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>