如何让“节点树”和“节点”的“选中”同时对应执行？

mingfish2 2010-09-17 04:44:29

如何让“节点树”和“节点”的“选中”同时对应执行？

demo：http://test.your-dede.info/wt/node_tree.htm

图片说明：

代码：



<style type="text/css">

	.selected,.current_node{border:1px solid red;}

	.node_tree div{width:100px;background:#FFDAB9;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

	function smart_tree(){

		$(".node_tree div").click(function (e){

			var $clicked=$(e.target);

			$clicked.toggleClass("current_node");

			//如何让node_content里面对应的节点加执行toggleClass("current_node");

			//........

		});

	} 

	$(function(){smart_tree();});

</script>



<div class="node_tree">

	<ul>

		<li>

			<div><span>ul</span></div>

			<ul>

				<li>

					<div class="current_node"><span>li</span></div>

					<ul class="current_child">

						<li><div><span>a</span></div></li>

					</ul>

				</li>

				<li><div><span>li</span></div></li>

				<li><div><span>li</span></div></li>

				<li><div><span>li</span></div></li>

			</ul>

		</li>

	</ul>

</div>



<div class="node_content">

	<ul>

		<li class="selected"><a href="#">刚果(金)大规模强奸案</a></li>

		<li><a href="#">赵本山限制小沈阳露面</a></li>

		<li><a href="#">林志玲尽显东方美</a></li>

		<li><a href="#">王珞丹被曝闪婚离异</a></li>

	</ul>

</div>

...全文

166 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

kaifadi 2010-09-19

打赏
举报

[Quote=引用 5 楼 ibm_hoojo 的回复:]

引用 2 楼 mingfish2 的回复:

我的意思是点击node_tree上的div时，根据点击的节点树目标查询到node_content里面的对应节点，给该节点加上selected

CSS code
你这个node_tree和node_content没有规律啊，有什么对应的条件么
[/Quote]
上面4个内包的<li>对应着下面4个<li>元素
楼主是这个意思吧！
如果是，那看来我越来越聪明了，不要楼主说我就能猜到楼主的意思了！
呵呵，见笑了！

hoojo 2010-09-19

打赏
举报

[Quote=引用 2 楼 mingfish2 的回复:]

我的意思是点击node_tree上的div时，根据点击的节点树目标查询到node_content里面的对应节点，给该节点加上selected
[/Quote]

你这个node_tree和node_content没有规律啊，有什么对应的条件么

mingfish2 2010-09-18

打赏
举报

	function smart_tree(){

		var arr=[];

		arr["tree"]=[];

		arr["tree"]["p"]=$(".current_node").parent().parent().parent().parent().children();

		arr["tree"]["s"]=$(".current_node").parent().parent().children();

		arr["tree"]["c"]=$(".current_node").next().children();

		arr["con"]=[];

		arr["con"]["p"]=$(".selected").parent().parent().children();

		arr["con"]["s"]=$(".selected").parent().children();

		arr["con"]["c"]=$(".selected").children();

		

		function smart_tree_fn(what){

			$.each(arr["tree"][what],function(i,n){

				$(n).click(function (e){

					$(n).children("div").toggleClass("current_node");

					arr["con"][what].eq(i).toggleClass("selected");

					e.stopPropagation();

				});

			});	

		}

		smart_tree_fn("p");

		smart_tree_fn("s");

		smart_tree_fn("c");

	};

kaifadi 2010-09-18

打赏
举报

<style type="text/css">

    .selected,.current_node{border:1px solid red;}

    .node_tree div{width:100px;background:#FFDAB9;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

    function smart_tree(){

      

            $(".node_tree ul li ul li").click(function(){

			$(this).toggleClass("current_node");

            $('.node_content ul li').eq($(this).index()).toggleClass('selected');

			}); 



     

    };

	var ind;

$(function(){smart_tree();});

</script>



<div class="node_tree">

    <ul>

        <li>

            <div><span>ul</span></div>

            <ul>

                <li>

                    <div><span>li</span></div>

                    <ul class="current_child">

                        <li><div><span>a</span></div></li>

                    </ul>

                </li>

                <li><div><span>li</span></div></li>

                <li><div><span>li</span></div></li>

                <li><div><span>li</span></div></li>

            </ul>

        </li>

    </ul>

</div>



<div class="node_content">

    <ul>

        <li><a href="#">刚果(金)大规模强奸案</a></li>

        <li><a href="#">赵本山限制小沈阳露面</a></li>

        <li><a href="#">林志玲尽显东方美</a></li>

        <li><a href="#">王珞丹被曝闪婚离异</a></li>

    </ul>

</div>

看看这个可否??

mingfish2 2010-09-17

打赏
举报

我的意思是点击node_tree上的div时，根据点击的节点树目标查询到node_content里面的对应节点，给该节点加上selected

hoojo 2010-09-17

打赏
举报

    function smart_tree(){

        $(".node_tree div span, .node_tree div li").click(function (e){

            var $clicked=$(e.target);

            $clicked.toggleClass("current_node");

            //如何让node_content里面对应的节点加执行toggleClass("current_node");

            //........

        });

    }