用JS控制树结构

leejersey 2011-10-20 12:59:42

在树结构中如何用JS控制点击其中一个节点时其他散开的节点隐藏起来（收缩起来）求方法

...全文

186 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

yhtapmys 2011-10-25

打赏
举报

一楼可行
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() 方法

leejersey 2011-10-25

打赏
举报

跪求具体详情

碧海情天-赵亮 2011-10-20

打赏
举报

1.用现成的JS树形控件。作为正式的树形控件，这些方法都有。先调用“收缩全部”函数，再调用打开某个具体节点的函数就可以了。

2.如果是自己想写一个JS树形控件，就参照一下现成的控件代码。

回头是岸 2011-10-20

打赏
举报

LS 不可以

zell419 2011-10-20

打赏
举报

treeview
就是对子节点的控制。

峭沙 2011-10-20

打赏
举报

<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>