我用这个脚本
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
http://jsfiddle.net/jhfrench/GpdgF/ http://jsfiddle.net/jhfrench/GpdgF/
用于递归可折叠菜单。它工作完美。但我需要菜单最初折叠,即页面加载并仅在单击时展开。
我的JS知识很薄弱。但我尝试使用toggle();和隐藏(); ,它会导致折叠并且单击时不会展开
下面是递归的php代码
<?php
function listroles($roles)
{
?>
<ul>
<?php
foreach($roles as $role)
{
?>
<li>
<span><i class="icon-plus "></i> Parent</span> <a href="<?php echo $role['category']->slug; ?>"><?php echo $role['category']->name; ?></a>
<?php
if ( ! empty($role['children']))
{
listroles($role['children']);
}
?>
</li>
<?php
}
?>
</ul>
<?php
}
listroles($this->categories_menu);
?>
您可以添加 css 规则来隐藏开头的子 li 元素
.tree li ul > li {
display: none;
}
Demo: Fiddle http://jsfiddle.net/arunpjohny/FKWE6/
或者在页面加载时隐藏子 li 元素
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
//hide the child li elements
$('.tree li ul > li').hide();
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
Demo: Fiddle http://jsfiddle.net/arunpjohny/XBRRh/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)