我正在尝试创建一个简单的 Accordion 菜单,其中嵌套在 li 中的 ul 被隐藏,直到单击父 li,这将首先隐藏所有其他嵌套的 ul(如果暴露),然后暴露该 li 的嵌套 ul。
唯一的问题是我想删除父 li 的 href。
我已经实现了大部分目标,除了我的嵌套 ul li 继承了上述操作,即使我的目标是 li 的父类。我知道我错过了一些基本的东西。提前致谢
HTML
<ul>
<li.expanded><a href="foo">Lorum</a>
<ul>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
</ul>
</li>
<li.expanded><a href="foo">Lorum</a>
<ul>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
</ul>
</li>
<li.expanded><a href="foo">Lorum</a>
<ul>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
</ul>
</li>
<li.expanded><a href="foo">Lorum</a>
<ul>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function() {
$('ul ul').hide();
$('ul li.expanded a').removeAttr("href");
$('ul li').click(function(){
$('ul ul').hide('slow');
$(this).find('ul').toggle('slow');
});
});
;
最佳答案
html 中有一些拼写错误,我已将 li.leaf 更改为 class='leaf'。我对剧本也有改动。使用 css 来隐藏所有子 ul。 查看实际操作:http://jsfiddle.net/theuideveloper/DFHWd/4/ 希望这对您有帮助。 快乐编码! -theUiDeveloper
HTML
<ul id="master">
<li class="expanded"><a href="foo">Lorum1</a>
<ul>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
</ul>
</li>
<li class="expanded"><a href="foo">Lorum2</a>
<ul>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
<li.leaf><a href="foo">Lorum</a></li>
</ul>
</li>
<li class="expanded"><a href="foo">Lorum3</a>
<ul>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
</ul>
</li>
<li class="expanded"><a href="foo">Lorum4</a>
<ul>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
<li class="leaf"><a href="foo">Lorum</a></li>
</ul>
</li>
</ul>
CSS
ul#master ul{
display:none;
}
jQuery
$(document).ready(function() {
$('ul li.expanded a').each(function(i){
var subUl = $(this).parent().find('ul'); //Get the sub ul.
$(this).bind('click',function(e){
e.preventDefault(); // Prevent the default action of the link
$('.expanded ul').hide(); // hide all the other ULs
subUl.toggle();
}) ;
});
});
关于jQuery 嵌套 ul 与 li 的父子,显示隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4957066/