我想为这个例子实现树形菜单。首先必须关闭所有。 当我们单击 facility Bulidngs 时，必须以树格式显示，然后如果我们单击 XYZ building Floors，则必须显示。像那样....
我试过这段代码但没有用任何人都可以帮助我。
$('.treemenu').click(function () {
$(this).parent().children('ul.subtree');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class="treemenu">
<li>Facility
<ul class="subtree">
<li>Building
<ul class="subtree">
<li>Royal Building</li>
<li>Taj Building</li>
<li>XYZ Building
<ul class="subtree">
<li>Floors
<ul class="subtree">
<li>1st Floor</li>
<li>2nd Floor</li>
<li>3rd Floor</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>最佳答案
- 隐藏所有子树。
- 添加将在点击父项时切换子树的 js。
<style>
.subtree{
display: none;
}
.treeitem{
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.treeitem').click(function () {
$(this).next('ul.subtree').toggle();
});
});
</script>
<ul class="treemenu">
<li><span class="treeitem">Facility</span>
<ul class="subtree">
<li><span class="treeitem">Building</span>
<ul class="subtree">
<li>Royal Building</li>
<li>Taj Building</li>
<li><span class="treeitem">XYZ Building</span>
<ul class="subtree">
<li><span class="treeitem">Floors</span>
<ul class="subtree">
<li>1st Floor</li>
<li>2nd Floor</li>
<li>3rd Floor</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>关于javascript - 如何用jquery实现树形菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39827787/