树结构，从结构中显示单击元素的文本

时间：2015-03-31 11:01:44

标签： javascript php jquery html css

这是我的树结构代码。当我点击Tag 1得到class =“active”时，当我点击Asia获得class =“open”时，当我点击Southern-West获得class =“open”时当我点击India时获得class =“selected” 。所有内容都显示在链接上的图片中：http://postimg.org/image/4216vmlpj/ 

<div class="container responsive-tabs-default">
        <ul class="responsive-tabs">
            <li><a href="#example-1-tab-1" target="_self">Tag 1</a></li>
            <li><a href="#example-1-tab-2" target="_self">Tag 2 </a></li>   
        </ul>

        <div class="responsive-tabs-content bm-larger">
            <div id="example-1-tab-1" class="responsive-tabs-panel">

                    <!-- TREE BEGIN-->

                    <h1>Naslov</h1>
                        <!--  <input type="search" id="my-search" placeholder="search"> -->
                        <ul id="my-tree1">
                            <li>
                                <div>Asia</div>
                                <ul>
                                    <li>
                                        <div>Southern-West</div>
                                        <ul>
                                            <li><div>India</div></li>
                                            <li><div>Pakistan</div></li>
                                            <li><div>Butan</div></li>
                                        </ul>
                                    </li>
                                    <li><div>Southern-East</div>
                                        <ul>
                                            <li><div>Indonesia</div></li>
                                            <li><div >Vietnam</div></li>
                                            <li><div >malaysia</div></li>
                                        </ul>
                                    </li>
                                    <li><div>Far-east</div>
                                        <ul>
                                            <li><div>China</div></li>
                                            <li><div>North Korea</div></li>
                                            <li><div>South Korea</div></li>
                                            <li><div>Japan</div></li>
                                        </ul>
                                    </li>
                                    <li><div>Central</div>
                                        <ul>
                                            <li><div>Mongol</div></li>
                                            <li><div>kazakhstan</div></li>
                                            <li><div>kyrgyzstan</div></li>
                                        </ul>                       
                                    </li>
                                </ul>
                            </li>
                            <li><div>Antarctica</div></li>
                            <li>
                                <div>Africa</div>
                                <ul>
                                    <li><div>Moroco</div></li>
                                    <li><div>Egypt</div></li>
                                    <li><div>Ghana</div></li>
                                </ul>
                            </li>
                            <li>
                                <div>Europe</div>
                                <ul>
                                    <li><div>United Kingdom</div></li>
                                    <li><div>Sweden</div></li>
                                    <li><div>Germany</div></li>
                                    <li><div>France</div></li>
                                    <li><div>Spain</div></li>
                                    <li><div>Italy</div></li>
                                    <li><div>Austria</div></li>
                                    <li><div>Turkey</div></li>
                                    <li><div>Russia</div></li>
                                    <li><div>Denmark</div></li>
                                    <li><div>Finland</div></li>
                                    <li><div>Iceland</div></li>
                                    <li><div>Switzerland</div></li>
                                    <li><div>Hungary</div></li>
                                </ul>
                            </li>
                        </ul> 
                    <!-- TREE END-->
            </div>
            <div id="example-1-tab-2" class="responsive-tabs-panel">

                <h1>Naslov</h1>
                    <!--  <input type="search" id="my-search" placeholder="search"> -->
                    <ul id="my-tree2">
                        <li>
                            <div>Asia</div>
                            <ul>
                                <li>
                                    <div>Southern-West</div>
                                    <ul>
                                        <li><div>India</div></li>
                                        <li><div>Pakistan</div></li>
                                        <li><div>Butan</div></li>
                                    </ul>
                                </li>
                                <li><div>Southern-East</div>
                                    <ul>
                                        <li><div>Indonesia</div></li>
                                        <li><div>Vietnam</div></li>
                                        <li><div>malaysia</div></li>
                                    </ul>
                                </li>
                                <li><div>Far-east</div>
                                    <ul>
                                        <li><div>China</div></li>
                                        <li><div>North Korea</div></li>
                                        <li><div>South Korea</div></li>
                                        <li><div>Japan</div></li>
                                    </ul>
                                </li>
                                <li><div>Central</div>
                                    <ul>
                                        <li><div>Mongol</div></li>
                                        <li><div>kazakhstan</div></li>
                                        <li><div>kyrgyzstan</div></li>
                                    </ul>                       
                                </li>
                            </ul>
                        </li>
                        <li><div>Antarctica</div></li>
                        <li>
                            <div>Africa</div>
                            <ul>
                                <li><div>Moroco</div></li>
                                <li><div>Egypt</div></li>
                                <li><div>Ghana</div></li>
                            </ul>
                        </li>
                        <li>
                            <div>Europe</div>
                            <ul>
                                <li><div>United Kingdom</div></li>
                                <li><div>Sweden</div></li>
                                <li><div>Germany</div></li>
                                <li><div>France</div></li>
                                <li><div>Spain</div></li>
                                <li><div>Italy</div></li>
                                <li><div>Austria</div></li>
                                <li><div>Turkey</div></li>
                                <li><div>Russia</div></li>
                                <li><div>Denmark</div></li>
                                <li><div>Finland</div></li>
                                <li><div>Iceland</div></li>
                                <li><div>Switzerland</div></li>
                                <li><div>Hungary</div></li>
                            </ul>
                        </li>

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

我希望该文字显示在页面的右侧，就像它显示在图片上一样。因此，当我在标签1上进行陈词滥调时，会写上标签1.当我点击亚洲时，就会出现亚洲写作...就像在图片上一样。我发现了一个sollution，向我显示了点击的文字，但没有正常工作。当我点击亚洲时，不仅写了亚洲，而且写了亚洲西南印度巴基斯坦Butan东南印度尼西亚越南...所以当我点击亚洲时，所有亚洲以下树木结构的元素都显示出来，但只有亚洲必须显示。第二个问题是，并非我所有的选择都是写的。因此，如果我选择标签1和南极洲，将会显示标签1和南极洲，当我点击标签2时，标签1被标签2替换。我希望先前的选择被存储和显示，当我创建一个新的时候选择它写在第一个选择下面。这也必须与各国合作。当我选择Tag 1 Antarctika，然后是欧洲 - 西班牙必须同时显示两个选项，因此Tag 1 Antarctica和Tag 1 Europe Spain。

到目前为止，我找到了一个代码：

<script>
                         $("").click(function () {
                        <!--    $(this).addClass('tf-selected');
                              var str = "";
                               $("li.active").each(function () {
                                   str +=  $(this).text() +" ";
                               });
                                $(".display_text_here").text(str);
                        });
                    </script>

                    <script>
                         $("").click(function () {
                        <!--    $(this).addClass('tf-selected');
                              var str = "";
                               $("li.tf-open").each(function () {
                                   str +=  $(this).text() +" ";
                               });
                                $(".display_text_here2").text(str);
                        });
                    </script>

                    <script>
                         $("").click(function () {
                        <!--    $(this).addClass('tf-selected');
                              var str = "";
                               $("li.tf-selected").each(function () {
                                   str +=  $(this).text() +" ";
                               });
                                $(".display_text_here3").text(str);
                        });
                    </script>
                    <div class="display_text_here"></div> 
                    <div class="display_text_here2"></div> 
                    <div class="display_text_here3"></div> 


<!DOCTYPE html>

<!-- Responsive Tabs v1.4, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/ -->
<html lang="en" class="no-js">

<head>

		
	<!-- tree  begin-->	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi">

		<link type="text/css" rel="stylesheet" href="tree/jquery.treefilter.css">
		<link href='http://fonts.googleapis.com/css?family=roboto:400,300,700' rel='stylesheet' type='text/css'>
		
		<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <!-- display selected -->
		
		<style>
			body		{background:#fff; padding:0;}
			.container	{font-family:"roboto"; font-size:16px; background:#fff; border-radius:3px;
						border:1px solid #ddd;}
			h1			{color:#08f; font-weight:100; font-size:44px; margin-top:150px;}
			input		{background:transparent; font-size:16px; border:1px solid #ddd; border-width:0 0 1px 0; border-radius: 0; line-height:40px; height:40px; width:100%; outline:none;}
			ul#my-tree	{margin:0; padding:10px 5px; color:#666;}
			ul#my-tree	li{margin:8px 0;}
			div.desc	{margin:20px 0; color:#aaa; font-size:11px; text-align:left;}
		</style>

		<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
		<link href="tabs/css/normalize.css" rel="stylesheet" type="text/css" media="all" />
		<link href="tabs/css/responsive-tabs.css" rel="stylesheet" type="text/css" media="all" /> 
		<link href="tabs/css/style2.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body itemscope itemtype="http://schema.org/WebPage">
<table style="width:100%">
	<tr>
		<td colspan="2" style="background: transparent url('images/top-ozadje2.bmp') repeat-x;">
	
	<!-- Header -->
			<h1 style="padding-left:45%"> SELECTION </h1> 
		</td>
	</tr>
	<tr>
	<td valign="top">
	<!-- Content -->
		<div class="container responsive-tabs-default">
			<ul class="responsive-tabs">
				<li><a href="#example-1-tab-1" target="_self">Tag 1</a></li>
				<li><a href="#example-1-tab-2" target="_self">Tag 2 </a></li>	
			</ul>

			<div class="responsive-tabs-content bm-larger">
				<div id="example-1-tab-1" class="responsive-tabs-panel">
			
						<!-- TREE BEGIN-->
						
						<h1>Naslov</h1>
							<!--  <input type="search" id="my-search" placeholder="search"> -->
							<ul id="my-tree1">
								<li>
									<div>Asia</div>
									<ul>
										<li>
											<div>Southern-West</div>
											<ul>
												<li><div>India</div></li>
												<li><div>Pakistan</div></li>
												<li><div>Butan</div></li>
											</ul>
										</li>
										<li><div>Southern-East</div>
											<ul>
												<li><div>Indonesia</div></li>
												<li><div >Vietnam</div></li>
												<li><div >malaysia</div></li>
											</ul>
										</li>
										<li><div>Far-east</div>
											<ul>
												<li><div>China</div></li>
												<li><div>North Korea</div></li>
												<li><div>South Korea</div></li>
												<li><div>Japan</div></li>
											</ul>
										</li>
										<li><div>Central</div>
											<ul>
												<li><div>Mongol</div></li>
												<li><div>kazakhstan</div></li>
												<li><div>kyrgyzstan</div></li>
											</ul>						
										</li>
									</ul>
								</li>
								<li><div>Antarctica</div></li>
								<li>
									<div>Africa</div>
									<ul>
										<li><div>Moroco</div></li>
										<li><div>Egypt</div></li>
										<li><div>Ghana</div></li>
									</ul>
								</li>
								<li>
									<div>Europe</div>
									<ul>
										<li><div>United Kingdom</div></li>
										<li><div>Sweden</div></li>
										<li><div>Germany</div></li>
										<li><div>France</div></li>
										<li><div>Spain</div></li>
										<li><div>Italy</div></li>
										<li><div>Austria</div></li>
										<li><div>Turkey</div></li>
										<li><div>Russia</div></li>
										<li><div>Denmark</div></li>
										<li><div>Finland</div></li>
										<li><div>Iceland</div></li>
										<li><div>Switzerland</div></li>
										<li><div>Hungary</div></li>
									</ul>
								</li>
							</ul> 
						<!-- TREE END-->
				</div>
				<div id="example-1-tab-2" class="responsive-tabs-panel">
					
					<h1>Naslov</h1>
						<!--  <input type="search" id="my-search" placeholder="search"> -->
						<ul id="my-tree2">
							<li>
								<div>Asia</div>
								<ul>
									<li>
										<div>Southern-West</div>
										<ul>
											<li><div>India</div></li>
											<li><div>Pakistan</div></li>
											<li><div>Butan</div></li>
										</ul>
									</li>
									<li><div>Southern-East</div>
										<ul>
											<li><div>Indonesia</div></li>
											<li><div>Vietnam</div></li>
											<li><div>malaysia</div></li>
										</ul>
									</li>
									<li><div>Far-east</div>
										<ul>
											<li><div>China</div></li>
											<li><div>North Korea</div></li>
											<li><div>South Korea</div></li>
											<li><div>Japan</div></li>
										</ul>
									</li>
									<li><div>Central</div>
										<ul>
											<li><div>Mongol</div></li>
											<li><div>kazakhstan</div></li>
											<li><div>kyrgyzstan</div></li>
										</ul>						
									</li>
								</ul>
							</li>
							<li><div>Antarctica</div></li>
							<li>
								<div>Africa</div>
								<ul>
									<li><div>Moroco</div></li>
									<li><div>Egypt</div></li>
									<li><div>Ghana</div></li>
								</ul>
							</li>
							<li>
								<div>Europe</div>
								<ul>
									<li><div>United Kingdom</div></li>
									<li><div>Sweden</div></li>
									<li><div>Germany</div></li>
									<li><div>France</div></li>
									<li><div>Spain</div></li>
									<li><div>Italy</div></li>
									<li><div>Austria</div></li>
									<li><div>Turkey</div></li>
									<li><div>Russia</div></li>
									<li><div>Denmark</div></li>
									<li><div>Finland</div></li>
									<li><div>Iceland</div></li>
									<li><div>Switzerland</div></li>
									<li><div>Hungary</div></li>
								</ul>
							</li>
							
						</ul> 
				</div>				
			</div>
		</div>
		</td>
		<td valign="top">		
			<div class="container2" > 
				<ul class="responsive-tabs">
					<h3>You have choosen:</h3>
					<button type="button" onClick="window.location.reload()">Delete choosen data</button>
					<hr>	
				</ul>	
				<p>	
											
						<script>
							 $("").click(function () {
							<!--	$(this).addClass('tf-selected');
								  var str = "";
								   $("li.active").each(function () {
									   str +=  $(this).text() +" ";
								   });
									$(".display_text_here").text(str);
							});
						</script>
						
						<script>
							 $("").click(function () {
							<!--	$(this).addClass('tf-selected');
								  var str = "";
								   $("li.tf-open").each(function () {
									   str +=  $(this).text() +" ";
								   });
									$(".display_text_here2").text(str);
							});
						</script>
						
						<script>
							 $("").click(function () {
							<!--	$(this).addClass('tf-selected');
								  var str = "";
								   $("li.tf-selected").each(function () {
									   str +=  $(this).text() +" ";
								   });
									$(".display_text_here3").text(str);
							});
						</script>
						<div class="display_text_here"></div> 
						<div class="display_text_here2"></div> 
						<div class="display_text_here3"></div> 
				</p>		
			</div>
		</td>
	</tr>
	
	<!-- Footer -->	
			
	<!-- JavaScript -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script src="tabs/js/smoothscroll.min.js" type="text/javascript"></script>
		<script src="tabs/js/backbone.js" type="text/javascript"></script>
		<script src="tabs/js/responsive-tabs.min.js" type="text/javascript"></script>
				
	<!-- tree begin -->
	
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script src="tree/jquery.treefilter.js"></script>
		<script>
		$(function() {
			var tree = new treefilter($("#my-tree1"), {
				searcher : $("input#my-search"),
				multiselect : false });
		});
		</script>
		<script>
		$(function() {
			var tree = new treefilter($("#my-tree2"), {
				searcher : $("input#my-search"),
				multiselect : false });
		});
		</script>
		
		<script>
		$(function() {
			var tree = new treefilter($("#my-tree3"), {
				searcher : $("input#my-search"),
				multiselect : false });
		});
		
		<script type="text/javascript">
		
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-36251023-1']);
		  _gaq.push(['_setDomainName', 'jqueryscript.net']);
		  _gaq.push(['_trackPageview']);

		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.tree = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

		</script>
		
	<!-- tree end -->
</table>	
</body>

</html>

Snipped不能正常工作，因为我的页面后面有manj js和css脚本。

任何人都可以提出如何改善我的溶剂的建议。

感谢大家的帮助

P.S。 答案很好。非常感谢您的所有努力。我还有一个问题。当我重新加载（或首次打开）页面时，其中一个选项卡已经是chossen（已打开），并显示该选项卡的树结构。如果我从树形结构中选择一个国家，我应该更改这个自动选择标签也会自动写在右侧？因为如果我从自动打开的标签中选择其中一个国家/地区，则此标记的名称不会写在国家/地区名称前面。

还有一个，当我选择非洲 - 马洛科然后选择欧洲 - 德国时，它的工作非常好。但是如果我再从非洲那里选择一个，比如埃及，这个就是贝洛夫德国（我得到欧洲 - 德国 - 埃及）。在这种情况下，我应该改变一下埃及在下面的选择中写下Maroco，而不是在最后一次选举中贬低德国？

这也是图片，显示了我的问题：http://postimg.org/image/icnw0ves3/

还有一个愿望是，如果我选择欧洲，然后德国，它会向我展示德国，如果我选择西班牙，删除德国并写西班牙。所以只写了最后一个选择。有时我需要两种选择有时只写一个。

我的老板只是复习了我的生活，并希望选择这样的国家：

Tag1中|亚洲：Souther-East =＆gt;印度尼西亚;欧洲：德国，西班牙;非洲：Maroco，Ghana Tag2 |欧洲：奥地利

我是怎么做的？

此代码在firefox中不起作用（当单击树结构时未定义而不是国家名称），并且在ie中。在铬中工作正常。我应该添加什么？

编辑 - 还有一个问题

首先感谢所有的努力。我还有一个问题，我应该怎么做，如果我选择欧洲然后德国它会向我展示德国，如果我选择西班牙，删除德国并写西班牙。所以只写了最后一个选择。有时我需要两种选择有时只写最后一种。图片：postimg.org/image/mfd4hmuqr我的老板只是复杂了我的生活，并希望选择的国家是这样的：Tag1 |亚洲：Souther-East =＆gt;印度尼西亚;欧洲：德国，西班牙;非洲：Maroco，Ghana Tag2 |欧洲：奥地利我该怎么做？

END OF EDIT

1 个答案:

答案 0 :(得分：2)

我不知道你的插件在做什么，你的JS代码有点难以理解，但你的文档结构是一致的，你的要求也不是太复杂，所以你可以实际做到这一点，而不是试图混合多个插件一起。

我使用了您的文档结构和样式规则，但没有使用任何JS代码（包括插件）来实现您的需求。我只在您的根tree元素（带有ul 1＆amp; 2的元素）中添加了#my-tree类 - 我将在后面解释原因。

基本上你想要实现以下目标：

  • 您的标签选择器（＆＃34;标记1＆＃34;和＆＃34;标记2＆＃34;）与.container .responsive-tabs li a选择器匹配。单击它们后，您希望显示相应的选项卡面板（所有面板与.responsive-tabs-panel选择器匹配），其ID与a元素的href属性相匹配。这意味着只需从点击的元素中获取href属性，即可删除＆＃34;＃＆＃34;从中，找到具有相同ID的选项卡面板，并在从所有其他选项卡面板中删除它时向其中添加active类。所以：

CSS：

.responsive-tabs-panel{
    display:none;
}
.responsive-tabs-panel.active{
    display:block;
}

JS：

var tabs = document.querySelectorAll('.container .responsive-tabs li a'),
    tabPanels = document.getElementsByClassName('responsive-tabs-panel');

for(var i=0;i<tabs.length;i++){

    tabs[i].addEventListener('click', function(e){

        e.preventDefault();
        var id = this.getAttribute('href').replace("#","");

        for(var j=0;j<tabPanels.length;j++){
             if(tabPanels[j].id==id)
                 tabPanels[j].classList.add('active');
             else tabPanels[j].classList.remove('active');
        }

    },false);
}
  • 现在，在您的标签面板的根ul元素中（我给了tree类），所有选项（无论是大陆，地区还是国家）匹配.responsive-tabs-panel li选择器。当此选项具有更多嵌套选项时，在文档结构中，这意味着该选项具有带有ul标记的子元素，其中包含更多选项。因此，如果单击的选项有更多选项，您希望为其指定open类并显示这些选项，否则您希望为其指定selected类。如果再次单击已打开的选项，则需要将其关闭。因此，在我们的CSS中，我们希望隐藏具有ul父级的所有li元素，除非父级具有open类。

CSS：

.responsive-tabs-panel .tree{
    display:block;
}
.responsive-tabs-panel li ul{
    display:none;
}
.responsive-tabs-panel li.open > ul{
    display:block;
}

JS：

var options = document.querySelectorAll('.responsive-tabs-panel li');

for(var k=0;k<options.length;k++){

    options[k].addEventListener('click',function(e){

        e.stopPropagation();
        var optionText = '',
            div = null, 
            hasMoreOptions = false;

        if(this.classList.contains('open')){
            this.classList.remove('open');
            return;
        }

        for(var l=0;l<this.children.length;l++){

            if(this.children[l].tagName.toLowerCase()=='div'){
                div = this.children[l];
                optionText = div.innerText;
            }
            else if(this.children[l].tagName.toLowerCase()=='ul'){
                hasMoreOptions = true;
            }

        }

        if(!hasMoreOptions){ 
            this.classList.add('selected');
        }
        else this.classList.add('open');

    },false);
}

（e.stopPropagation在这里很重要，因为如果我们不调用它，也会在每个li元素上调用eventListener函数，该元素是所点击的{{1}的父元素停止它意味着它只会在实际单击选项上调用，而不是在定义li数组时与其提供的选择器匹配的所有父项。）

  • 正如您可能已经注意到的那样，我们还从点击的options元素中提取了选项文本，找到了它的li子元素并获取了它的innerText。这是因为您要记录用户单击的所有元素。任何时候单击选项卡或选项。最简单的方法是使用单击选项的文本创建div元素，并将其附加到右侧容器中的div元素。

  • 如果您还想显示所选选项的嵌套级别，那么根据您的文档结构，最简单的方法是计算它到达的父级.container2 p元素的数量。 ul元素（这就是我将类添加到根ul.tree）的原因。您可以将此数字乘以4个空格，并在将选项文本附加到具有几个简单函数的ul元素时将其添加到选项文本之前。 

.container2 p

现在，您只需要在早期的eventListener函数中插入一行（一个用于标记，一个用于选项），方法是调用var selectedOptions = document.querySelector('.container2 p'); function getNestingLevel(li){ var level = 1, parent = li.parentNode; while(!parent.classList.contains('tree')){ if(parent.tagName.toLowerCase()=='ul') level++; parent = parent.parentNode; } return level; } function updateSelectedOptions(optionText,nestingLevel){ var div = document.createElement('div'), indent = ''; for(var i=1;i<nestingLevel*4;i++) indent = indent + '&nbsp;'; div.innerHTML = indent+optionText; selectedOptions.appendChild(div); } ：

对于标签：

updateSelectedOptions

选项：

updateSelectedOptions(this.innerText,0);

这是一个组合所有内容的笔：http://codepen.io/anon/pen/zxXZYZ

编辑回复：

IE＆amp; Firefox是我使用的updateSelectedOptions(optionText,getNestingLevel(this)); ，而我应该使用更受支持的.innerText属性。所以这已得到修复。至于您的其他问题，我也更改了代码以支持您的要求。现在，默认标记（默认情况下为.innerHTML）有一个.responsive-tabs li a类，如果用户选择一个选项而不先选择选项卡，它就会起作用。现在还有一个名为default的全局变量，其中包含单击打开的最新元素。现在我们将单击的latestOpen元素直接传递给li函数，该函数计算latestOpen元素的接近程度，并使用其间的所有选项更新updateSelectedOptions。它还计算嵌套并更新.container2 p变量。

相关问题
最新问题