用JS控制树结构 在树结构中如何用JS控制 点击其中一个节点时 其他散开的节点隐藏起来(收缩起来)求方法 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <html xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Test</title> <style> .hidden ul{ display: none; } </style> <script src="jquery.js"></script></head><body> <ul> <li> <span>list 1</span> <ul> <li>list a</li> <li>list b</li> <li>list c</li> <li>list d</li> <li>list e</li> </ul> </li> <li> <span>list 2</span> <ul> <li>list a</li> <li>list b</li> <li>list c</li> <li>list d</li> <li>list e</li> </ul></li> <li> <span>list 3</span> <ul> <li>list a</li> <li>list b</li> <li>list c</li> <li>list d</li> <li>list e</li> </ul></li> <li> <span>list 4</span> <ul> <li>list a</li> <li>list b</li> <li>list c</li> <li>list d</li> <li>list e</li> </ul></li> <li> <span>list 5</span> <ul> <li>list a</li> <li>list b</li> <li>list c</li> <li>list d</li> <li>list e</li> </ul></li> </ul> <script> $('li').click(function(){ $(this).siblings().addClass('hidden'); $(this).removeClass('hidden'); }); </script></body></html> treeview就是对子节点的控制 。 1.用现成的JS树形控件。作为正式的树形控件,这些方法都有。先调用“收缩全部”函数,再调用打开某个具体节点的函数就可以了。2.如果是自己想写一个JS树形控件,就参照一下现成的控件代码。 一楼可行1.点击某个节点时,先循环所有节点,并隐藏子树2.显示点击的节点的子树 //...引用jquery.js。楼主若不用jquery,自己写JS也可以,参考五楼 $(document).ready(function() {//加载时 $('ul li').siblings().addClass('hidden');//收缩所有li节点 }); $('li').click(function(){//点击某li时 $(this).siblings().addClass('hidden');//先收缩所有li节点 $(this).removeClass('hidden');//再展开点击的li节点 });附:jQuery 遍历 - siblings() 方法 如何判断radio选中了哪个值 $(this)获取子节点的值 急急令~JS如何获取当前行的index值~ javascript函数问题求解 javascript的数组元素为对象时出现的问题 JSP 我是新手,帮忙改一下用户注册的javascript语句吧 请教一个正则 替换HTML中所有<TAG>之外的东西 AA为BB jsp中如何获取javascript中的参数; jsp 传 JSON 到 JAVA 后台处理的问题 求用jquery实现一效果 在一个静态页面上 显示 “注册和登录” ,登录后 显示 用户的信息 探讨求助 为什么我的代码不会运行IF
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style>
.hidden ul{
display: none;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<ul>
<li>
<span>list 1</span>
<ul>
<li>list a</li>
<li>list b</li>
<li>list c</li>
<li>list d</li>
<li>list e</li>
</ul>
</li>
<li>
<span>list 2</span>
<ul>
<li>list a</li>
<li>list b</li>
<li>list c</li>
<li>list d</li>
<li>list e</li>
</ul></li>
<li>
<span>list 3</span>
<ul>
<li>list a</li>
<li>list b</li>
<li>list c</li>
<li>list d</li>
<li>list e</li>
</ul></li>
<li>
<span>list 4</span>
<ul>
<li>list a</li>
<li>list b</li>
<li>list c</li>
<li>list d</li>
<li>list e</li>
</ul></li>
<li>
<span>list 5</span>
<ul>
<li>list a</li>
<li>list b</li>
<li>list c</li>
<li>list d</li>
<li>list e</li>
</ul></li>
</ul>
<script>
$('li').click(function(){
$(this).siblings().addClass('hidden');
$(this).removeClass('hidden');
});
</script>
</body>
</html>
就是对子节点的控制 。
1.点击某个节点时,先循环所有节点,并隐藏子树
2.显示点击的节点的子树
//...引用jquery.js。楼主若不用jquery,自己写JS也可以,参考五楼 $(document).ready(function() {//加载时
$('ul li').siblings().addClass('hidden');//收缩所有li节点
});
$('li').click(function(){//点击某li时
$(this).siblings().addClass('hidden');//先收缩所有li节点
$(this).removeClass('hidden');//再展开点击的li节点
});
附:
jQuery 遍历 - siblings() 方法