如何使用纯JavaScript

时间：2018-08-25 10:29:01

标签： javascript jquery

我只想使用css和javascript创建树视图手风琴结构，而无需使用库。

在此树形视图中，所有元素都必须为复选框，因此当它们被选中时，它们将显示子级，而当它们未被选中时，则将其隐藏。

请任何人都可以帮助我。

下面是我需要重现的示例图像，但是带有复选框，不必看起来完全一样。

Sample Image

谢谢。

3 个答案:

答案 0 :(得分：1)

检查此链接 Refrence Link 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSList - Very simple nested list example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style>
			* {
				box-sizing: border-box;
			}
			html,body{
				margin: 0;
				padding: 0;
				font-family: 'Roboto';
				font-size: 18px;

			}
			/* ONLY required CSS */
			ul,ol{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.headBnr{
				position: absolute;
				width: 100%;
				height: 80px;
				background-color: #ccc;
			}
			.simpleListInfo{
				position: absolute;
				right: 5%;
				top: 12%;
				width: 65%;
				overflow-y: scroll;
			}
			.simpleListContainer{
				position: absolute;
				left: 3%;
				top: 15%;
				width: 15%;
				min-width: 200px;
				border: 1px solid rgb(165, 165, 165);
				padding: 15px;
			}
			#title {
				font-size: 26px;
				font-weight: 900;
				padding-left: 3%;
			}
		</style>
</head>
<body>
<header>

</div>
<script type="text/javascript">
    google_ad_client = "ca-pub-2783044520727903";
    google_ad_slot = "7946467596";
    google_ad_width = 300;
    google_ad_height = 250;
</script>
</div>
</header>
<main>
<div class="simpleListContainer">
<ul id="simple_list">
<li>
<i class="fa fa-folder-o" aria-hidden="true"></i>
<b>Folder One</b>
<ul>
<li id="aa1"><i class="fa fa-file-text-o" aria-hidden="true"></i> Click Me</li>
<a href="https://www.google.com"><li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li></a>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Four</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>
</ul>
</li>
<li>
<i class="fa fa-folder-o" aria-hidden="true"></i>
<b><a href="#">Folder Two</a></b>
<ul>
<li><i class="fa fa-folder-o" aria-hidden="true"></i> Item One
<ul>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> C</li>
</ul>
</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>
<li>
<i class="fa fa-folder-o" aria-hidden="true"></i> Item Four
<ul>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>
<li><i class="fa fa-folder-o" aria-hidden="true"></i> C
<ul>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>
<li><i class="fa fa-folder-o" aria-hidden="true"></i> B
<ul>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>
<li><i class="fa fa-folder-o" aria-hidden="true"></i> C
<ul>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i><a href="#"> A</a></li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> B</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> C</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> C</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>
</ul>
</li>
<li>
<i class="fa fa-folder-o" aria-hidden="true"></i>
<b>Folder Three</b>
<ul>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item One</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Four</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>
</ul>
</li>
<li>
<i class="fa fa-folder-o" aria-hidden="true"></i>
<b>Folder Four</b>
<ul>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item One</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Two</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Three</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Four</li>
<li><i class="fa fa-file-text-o" aria-hidden="true"></i> Item Five</li>
</ul>
</li>
<li>
<i class="fa fa-folder-o" aria-hidden="true"></i>
<b>Folder Five</b>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</li>
</ul>
</div>
</main>
<footer>
</footer>
<script>
(function(){"use strict";function e(){var e={};return e.greet=function(){console.log("** Welcome to JSLists **")},e.checkNodes=function(){},e.collapseAll=function(e){var t,l=Array.prototype.slice.call(document.getElementsByTagName("UL")),s=Array.prototype.slice.call(document.getElementsByTagName("OL")),n=l.concat(s);for(t=1;t<n.length;t++)n[t].setAttribute("class","jsl-collapsed")},e.openAll=function(e){var t,l=Array.prototype.slice.call(document.getElementsByTagName("UL")),s=Array.prototype.slice.call(document.getElementsByTagName("OL")),n=l.concat(s);for(t=1;t<n.length;t++)n[t].setAttribute("class","jsl-open")},e.generateCss=function(){var e=document.createElement("style"),t=".jslist-li{margin-left: 22px;}";t+=".jslist-ul{margin-left: 22px;}",t+=".jslist-ol{margin-left: 22px;}",t+=".jsl-collapsed{display: none;}",t+=".jsl-collapsed-arrow{float: left; clear: both; margin-right: 11px; width: 11px; height: 11px; cursor: pointer; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKJJREFUeNqEkc0JxCAQhUfRg7EJweN2IikoJWxBkm4EexCvur4gi4kuO/Dw532O48i89y8ieje5Jk5zlKaz6RAArbW7MYYYYxNZa+Uxxj2EcGVyALsxCdF9B5gj4wgopW7rfiNf1fgzxFAbaa2/xrZt15hznuHRwKERWmZ+dGEJF7RnNFNKN7jPCx54tj6SEIKklJOwDx8cMh9oeNPfH/wIMABbu2PPHYUsbQAAAABJRU5ErkJggg==') no-repeat;}",t+=".jsl-open{display: block;}",t+=".jsl-open-arrow{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALBAMAAABbgmoVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACRQTFRFtLS0tLS0tLS0AAAAtLS019fX8/Pz9PT09fX19vb29/f3+Pj4NWr6kwAAAAN0Uk5TK7P9wooeBQAAAD9JREFUCNdjYFRxcVFkYBBdvXv3UgEGrVVAoMDgPXPmzNkOcKrZ2LgbSHV0dICo8vLyagcGrbS0tCwFmD6IKQDtKxlF/vrVqgAAAABJRU5ErkJggg==') no-repeat;}",e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(e)},e.paddULLists=function(e){var t,l=document.getElementById(e).getElementsByTagName("UL");for(t=0;t<l.length;t++)l[t].classList.add("jslist-ul")},e.paddOLLists=function(e){var t,l=document.getElementById(e).getElementsByTagName("UL");for(t=0;t<l.length;t++)l[t].classList.add("jslist-ol")},e.padLists=function(e){var t,l=document.getElementById(e).getElementsByTagName("LI");for(t=0;t<l.length;t++)"jsl-collapsed-arrow"!=l[t].childNodes[0].className&&l[t].classList.add("jslist-li");this.paddULLists(e),this.paddOLLists(e)},e.generateList=function(e){this.generateCss(),document.getElementById(e).style.display="none;";var t,l,s,n,a=document.getElementById(e).getElementsByTagName("LI");for(t=0;t<a.length;t++)if(a[t].id.length>0){if(s=document.getElementById(a[t].id),n=document.getElementById(a[t].id).getElementsByTagName("UL"),n.length>0){for(l=0;l<n.length&&("UL"!=n[l].nodeName&&"OL"!=n[l].nodeName);l++);n[l].setAttribute("class","jsl-collapsed");var o=document.createElement("div");o.setAttribute("class","jsl-collapsed-arrow"),o.setAttribute("id",a[t].id+t+"_tgl"),s.insertBefore(o,s.childNodes[0]),document.getElementById(a[t].id+t+"_tgl").addEventListener("click",function(e){document.getElementById(e.target.id).classList.toggle("jsl-open-arrow"),document.getElementById(e.target.id).parentElement.lastElementChild.classList.toggle("jsl-open"),e.stopPropagation()},!0)}}else{if(a[t].setAttribute("id",e+"tmp"+t),s=document.getElementById(e+"tmp"+t),n=document.getElementById(a[t].id).getElementsByTagName("UL"),n.length>0){for(l=0;l<n.length&&("UL"!=n[l].nodeName&&"OL"!=n[l].nodeName);l++);n[l].setAttribute("class","jsl-collapsed");var o=document.createElement("div");o.setAttribute("class","jsl-collapsed-arrow"),o.setAttribute("id",a[t].id+t+"_tgl"),s.insertBefore(o,s.childNodes[0]),document.getElementById(a[t].id+t+"_tgl").addEventListener("click",function(e){document.getElementById(e.target.id).classList.toggle("jsl-open-arrow"),document.getElementById(e.target.id).parentElement.lastElementChild.classList.toggle("jsl-open"),e.stopPropagation()},!0)}a[t].removeAttribute("id")}setTimeout(function(){document.getElementById(e).style.display="block;"},99),this.padLists(e)},e.applyToList=function(e,t){switch(t.toUpperCase()){case"UL":this.generateList(e,"UL");break;case"OL":this.generateList(e,"OL");break;case"ALL":this.generateList(e)}},e}"undefined"==typeof JSLists?window.JSLists=e():console.log("JSLists already defined.")})();
</script>
<script>
			document.getElementById('aa1').addEventListener('click', function(e){
				alert('You clicked link: ' + e.target.id);
			},true);
			JSLists.applyToList('simple_list', 'ALL');
		</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46156385-1', 'cssscript.com');
  ga('send', 'pageview');

</script>
</body>
</html>

答案 1 :(得分：0)

您可以使用纯js，但这会花费很长时间，所以为什么不使用jquery呢？

答案 2 :(得分：0)

检查一下，这是我刚刚做的一个非常简单的解决方案，它缺少可以用css添加em的减号和加号图标。

https://jsfiddle.net/erubielgm/93k1wqxg/

CSS 

.child-check{
  margin-left: 15px;
  display: none;
}

.child-check.active{
  display: block;
}

HTML 

<div class="parent-check">
   <input type="checkbox"><label>Level 1</label>
   <div class="child-check">
     <input type="checkbox"><label>Level 1.1</label>
     <div class="child-check">
       <input type="checkbox"><label>Level 1.1</label>
     </div>
   </div>
</div>
<div class="parent-check">
   <input type="checkbox"><label>Level 2</label>
     <div class="child-check">
       <input type="checkbox"><label>Level 2.1</label>
     </div>
</div>

JavaScript 

var checks = document.querySelectorAll("input[type=checkbox]");

for(var i = 0; i < checks.length; i++){
  checks[i].addEventListener( 'change', function() {
    if(this.checked) {
       showChildrenChecks(this);
    } else {
       hideChildrenChecks(this)
    }
  });
}

function showChildrenChecks(elm) {
   var pN = elm.parentNode;
   var childCheks = pN.children;

  for(var i = 0; i < childCheks.length; i++){
      if(hasClass(childCheks[i], 'child-check')){
          childCheks[i].classList.add("active");      
      }
  }

}

function hideChildrenChecks(elm) {
   var pN = elm.parentNode;
   var childCheks = pN.children;

  for(var i = 0; i < childCheks.length; i++){
      if(hasClass(childCheks[i], 'child-check')){
          childCheks[i].classList.remove("active");      
      }
  }

}

function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
相关问题
最新问题