UL
关闭时如何添加加号,打开时如何添加减号。
看我的代码。当列表没有子菜单时,我需要添加加号图标;当列表打开时,我需要减号图标。并在列表打开时添加左填充
$(document).ready(function() {
$('ul.subcat').hide();
$('li').click(function(event) {
event.stopPropagation();
$('> ul', this).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="headcat">
<li>item
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li>
<p>text</p>
</li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li>
<p>text</p>
</li>
<li>subsubsubitem 1
<ul class="subcat">
<li>
<p>text</p>
</li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>
最佳答案
您可以toggleClass
,然后使用css pseudo
可以应用fontAwsome
。检查代码段。
$(document).ready(function() {
$('ul.subcat').hide();
$('li').click(function(event) {
event.stopPropagation();
$('> ul', this).toggle();
$(this).toggleClass("active");
});
});
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.headcat li i:before {
font-family: FontAwesome;
content: "\f067";
padding-right: 5px;
}
.headcat li.active i:before {
content: "\f068";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="headcat">
<li>item 1 <i></i>
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li>
<p>text</p>
</li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li>
<p>text</p>
</li>
<li>subsubsubitem 1
<ul class="subcat">
<li>
<p>text</p>
</li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>