JavaScript + CSS单个可折叠垂直菜单

时间：2016-12-06 07:14:29

标签： javascript html css

每个人，我一直在学习并尝试使用JavaScript和CSS制作可折叠的垂直菜单。

当我展开两个菜单并再次点击用户1时，我应该怎么做才能隐藏用户2？

以下是编码：

body { 
background:#ffffff; 
margin: 0 auto; 
}

#nav{
width: 200px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #999999;
}

#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}

li ul {
	border-bottom: 1px solid #000000;
	border-top: 1px solid  #000000;
	position: relative;
	display:none;
}

ul li a {
	display:block;
	text-decoration: none;
	color: #000000;
	background: #8CDD81; 
	line-height:2em;
	height:2em;	
	padding:2px 2px
	}
	
li li a {
	background:#D7DBDD
	}

li:hover li a, li.over li a {
   background-color: #D7DBDD;
   }

li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
   color: #000000;
   background-color: #F4D03F  ;
   }

header {
	font-family: 'Lobster', cursive;
	text-align: center;
	font-size: 25px;	
	}

#info {
	font-size: 18px;
	color: #555;
	text-align: center;
	margin-bottom: 25px;
}

a{
	color: #074E8C;
	}

.scrollbar {
	margin-left: 30px;
	float: left;
	height: 200px;
	width: 210px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
	}

.force-overflow {
	min-height: 450px;
	}

#wrapper {
	text-align: center;
	width: 500px;
	margin: auto;
	}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
	width: 10px;
	background-color: #cccccc;
}

#style-4::-webkit-scrollbar-thumb
{
	background-color: #9fa6ad;
	border: 2px solid #9fa6ad;
}


li ul li {} 
li.on ul {
	display:block  
	}
	
li.off ul {
	display:none
	}
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {
if (document.getElementById) {
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
		node.onclick=function() {

          this.className = (this.className == "on") ? "off" : "on";
		}
		}
	}
}
}
window.onload=startList;
//--><!]]>
</script>

<body> 
<id="wrapper">
<div class="scrollbar" id="style-4" class="force-overflow">
<ul id="nav">
<li><a href="#"><strong>MENU</strong></a></li>
<li><a href="#"><strong>User 1 &gt;</strong></a> 
<ul>
<li><a href="#">Name </a></li>
<li><a href="#">Age</a></li>
</ul>
</li>
<li><a href="#"><strong>User 2 &gt;</strong></a>
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Age</a></li>
</ul>
</li>
</div>
</div>
</ul>
</body>

3 个答案:

答案 0 :(得分：1)

off之前通过从其他元素中删除li类来选择on 

if(document.getElementsByClassName("on").length>0)
            document.getElementsByClassName("on")[0].className = "off";


body {
  background: #ffffff;
  margin: 0 auto;
}
#nav {
  width: 200px;
  padding: 0;
  margin-bottom: 0px;
  font-size: 10px;
  font-family: Verdana;
  color: #999999;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
#nav li {
  border-bottom: 1px solid #fff;
  margin: 0;
  width: auto;
}
li ul {
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
  position: relative;
  display: none;
}
ul li a {
  display: block;
  text-decoration: none;
  color: #000000;
  background: #8CDD81;
  line-height: 2em;
  height: 2em;
  padding: 2px 2px
}
li li a {
  background: #D7DBDD
}
li:hover li a,
li.over li a {
  background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
  color: #000000;
  background-color: #F4D03F;
}
header {
  font-family: 'Lobster', cursive;
  text-align: center;
  font-size: 25px;
}
#info {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-bottom: 25px;
}
a {
  color: #074E8C;
}
.scrollbar {
  margin-left: 30px;
  float: left;
  height: 200px;
  width: 210px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}
.force-overflow {
  min-height: 450px;
}
#wrapper {
  text-align: center;
  width: 500px;
  margin: auto;
}
/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
  width: 10px;
  background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
  background-color: #9fa6ad;
  border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
  display: block
}
li.off ul {
  display: none
}
<script type="text/javascript">
  <!--//--><![CDATA[//><!--
  startList = function() {
    if (document.getElementById) {
      navRoot = document.getElementById("nav");
      for (i = 0; i < navRoot.childNodes.length; i++) {
        node = navRoot.childNodes[i];
        if (node.nodeName == "LI") {
          node.onclick = function() {
            if(document.getElementsByClassName("on").length>0)
            document.getElementsByClassName("on")[0].className = "off";
            this.className = (this.className == "on") ? "off" : "on";
          }
        }
      }
    }
  }
  window.onload = startList;
  //--><!]]>
</script>

<body>
  <id="wrapper">
    <div class="scrollbar" id="style-4" class="force-overflow">
      <ul id="nav">
        <li><a href="#"><strong>MENU</strong></a>
        </li>
        <li><a href="#"><strong>User 1 &gt;</strong></a> 
          <ul>
            <li><a href="#">Name </a>
            </li>
            <li><a href="#">Age</a>
            </li>
          </ul>
        </li>
        <li><a href="#"><strong>User 2 &gt;</strong></a>
          <ul>
            <li><a href="#">Name</a>
            </li>
            <li><a href="#">Age</a>
            </li>
          </ul>
        </li>
    </div>
    </div>
    </ul>
</body>

答案 1 :(得分：1)

您可以使用jQuery来减少编码工作量。 以下是您需要的唯一代码。

body {
  background: #ffffff;
  margin: 0 auto;
}
#nav {
  width: 200px;
  padding: 0;
  margin-bottom: 0px;
  font-size: 10px;
  font-family: Verdana;
  color: #999999;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
#nav li {
  border-bottom: 1px solid #fff;
  margin: 0;
  width: auto;
}
li ul {
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
  position: relative;
  display: none;
}
ul li a {
  display: block;
  text-decoration: none;
  color: #000000;
  background: #8CDD81;
  line-height: 2em;
  height: 2em;
  padding: 2px 2px
}
li li a {
  background: #D7DBDD
}
li:hover li a,
li.over li a {
  background-color: #D7DBDD;
}
li a:hover,
li:hover a,
li.over a,
li:hover li a:hover,
li.over li a:hover {
  color: #000000;
  background-color: #F4D03F;
}
header {
  font-family: 'Lobster', cursive;
  text-align: center;
  font-size: 25px;
}
#info {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-bottom: 25px;
}
a {
  color: #074E8C;
}
.scrollbar {
  margin-left: 30px;
  float: left;
  height: 200px;
  width: 210px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}
.force-overflow {
  min-height: 450px;
}
#wrapper {
  text-align: center;
  width: 500px;
  margin: auto;
}
/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
  width: 10px;
  background-color: #cccccc;
}
#style-4::-webkit-scrollbar-thumb {
  background-color: #9fa6ad;
  border: 2px solid #9fa6ad;
}
li ul li {} li.on ul {
  display: block
}
li.off ul {
  display: none
}
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'> </script>

<script type="text/javascript">
 $(document).ready(function(){
    $("#nav li").click(function(){
        currentClass = $(this).attr('class');
        $("#nav li").removeClass('on').addClass('off');
        newClass = (currentClass == 'on' ? 'off' : 'on');
        $(this).removeClass('off').addClass(newClass);
    });
});
</script>

<body>
  <id="wrapper">
    <div class="scrollbar" id="style-4" class="force-overflow">
      <ul id="nav">
        <li class=''><a href="#"><strong>MENU</strong></a>
        </li>
        <li><a href="#"><strong>User 1 &gt;</strong></a> 
          <ul>
            <li><a href="#">Name </a>
            </li>
            <li><a href="#">Age</a>
            </li>
          </ul>
        </li>
        <li><a href="#"><strong>User 2 &gt;</strong></a>
          <ul>
            <li><a href="#">Name</a>
            </li>
            <li><a href="#">Age</a>
            </li>
          </ul>
        </li>
<li><a href="#"><strong>User 3 &gt;</strong></a>
          <ul>
            <li><a href="#">Name</a>
            </li>
            <li><a href="#">Age</a>
            </li>
          </ul>
        </li>
    </div>
    </div>
    </ul>
</body>

答案 2 :(得分：0)

我制作了这个导航菜单供参考。它也会对屏幕尺寸做出响应。

＆＃13;
＆＃13; 
var btn = document.getElementById('navBtn');
var ul = document.getElementById('navUl');

btn.addEventListener("click", function(){
    ul.classList.toggle("active");
});
＆＃13; 
#bar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #333;
}
nav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-family: Verdana;
  text-decoration: none;
}
nav ul li:hover {
  background-color: #666;
}
#navBtn {
  display: none;
}
@media screen and (max-width: 500px) {
  nav ul li,
  nav ul li a {
    text-align: center;
    display: block;
  }
  nav ul {
    display: none;
  }
  nav ul.active {
    display: block;
  }
  #navBtn {
    display: block;
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    background-color: #333;
    color: #fff;
  }
}
＆＃13; 
<div id="bar">
  <button id="navBtn">&#9776;</button>
  <nav>
    <ul id="navUl">
      <li><a href="#">home</a></li>
      <li><a href="#">news</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about</a></li>
    </ul>
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

作为旁注，你也可以在技术上用纯CSS做到这一点（但是，这有点棘手;你要使用带有标签的复选框）。

另外，我看到了您的className =代码，因此我想在代码中明确指出Element.classList位。它附带.add()，.remove()，.toggle()和其他有用的方法。

相关问题
最新问题