我想显示/隐藏 AsciiDoctor 生成的目录菜单。这是我的 HTML 代码:
ul li ul {
display: none;
}
ul li:active ul {
display: block;
}<div id="toc" class="toc2">
<div id="toctitle">TEST TEST</div>
<ul class="sectlevel1">
<li><a href="#_test1">1. TEST1</a>
</li>
<li><a href="#_test2">2. TEST2</a>
</li>
<li><a href="#_test3">3. TEST3</a>
</li>
<li><a href="#_test4">4. TEST4</a>
</li>
<li><a href="#_test5">5. TEST5</a>
<ul class="sectlevel2">
<li><a href="#_test51">5.1. TEST51</a>
</li>
</ul>
</li>
<li><a href="#_test6">6. TEST6</a>
<ul class="sectlevel2">
<li><a href="#_test61">6.1. TEST61</a>
</li>
<li><a href="#_test62">6.2. TEST62</a>
</li>
</ul>
</li>
</ul>
</div>当我单击目录菜单中的元素时，我想显示子项，如果我第二次单击我想隐藏它。
最佳答案
这是一个使用 jquery
首先，您需要为每个列表项触发一个click 事件处理程序。其次，您需要检查单击的列表项是否有 ul 个子项，如果为 true 则需要显示或隐藏元素。
$('li a').click(function(){
var uls=$(this).parent('li').find('ul');
if(uls.length>0){
uls.is(":visible") ? uls.hide() : uls.show();
}
});
$('li a').click(function() {
var uls = $(this).parent('li').find('ul');
if (uls.length > 0) {
uls.is(":visible") ? uls.hide() : uls.show();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="article toc2 toc-left">
<div id="toc" class="toc2">
<div id="toctitle">TEST TEST</div>
<ul class="sectlevel1">
<li><a href="#_test1">1. TEST1</a>
</li>
<li><a href="#_test2">2. TEST2</a>
</li>
<li><a href="#_test3">3. TEST3</a>
</li>
<li><a href="#_test4">4. TEST4</a>
</li>
<li><a href="#_test5">5. TEST5</a>
<ul class="sectlevel2">
<li><a href="#_test51">5.1. TEST51</a>
</li>
</ul>
</li>
<li><a href="#_test6">6. TEST6</a>
<ul class="sectlevel2">
<li><a href="#_test61">6.1. TEST61</a>
</li>
<li><a href="#_test62">6.2. TEST62</a>
</li>
</ul>
</li>
</ul>
</div>一个简单的方法是直接使用toggle方法。
有了它，您可以在 hide() 和 show() 方法之间切换。
像这样:
$('li a').click(function(){
var uls=$(this).parent('li').find('ul');
if(uls.length>0){
uls.toggle();
}
});
关于javascript 显示/隐藏目录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40976579/