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

大家好，我一直在学习并尝试使用JavaScript和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 { 
 
\t border-bottom: 1px solid #000000; 
 
\t border-top: 1px solid #000000; 
 
\t position: relative; 
 
\t display:none; 
 
} 
 

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

 
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 { 
 
\t font-family: 'Lobster', cursive; 
 
\t text-align: center; 
 
\t font-size: 25px; \t 
 
\t } 
 

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

 
a{ 
 
\t color: #074E8C; 
 
\t } 
 

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

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

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

 
/* 
 
* STYLE 4 
 
*/ 
 

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

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

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

 

 
li ul li {} 
 
li.on ul { 
 
\t display:block 
 
\t } 
 
\t 
 
li.off ul { 
 
\t display:none 
 
\t }

<script type="text/javascript"> 
 
<!--//--><![CDATA[//><!-- 
 
startList = function() { 
 
if (document.getElementById) { 
 
\t navRoot = document.getElementById("nav"); 
 
\t for (i=0; i<navRoot.childNodes.length; i++) { 
 
\t \t node = navRoot.childNodes[i]; 
 
\t \t if (node.nodeName=="LI") { 
 
\t \t node.onclick=function() { 
 

 
      this.className = (this.className == "on") ? "off" : "on"; 
 
\t \t } 
 
\t \t } 
 
\t } 
 
} 
 
} 
 
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>

来源

2016-12-06 Iman Yasmin

off以前由其他元素去除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>

来源

2016-12-06 07:36:50 jafarbtech

谢谢@jafarbtech。 –

我做了这个导航菜单以供参考。它对屏幕尺寸也有响应。

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

 
btn.addEventListener("click", function(){ 
 
    ul.classList.toggle("active"); 
 
});

#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; 
 
    } 
 
}

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

作为一个侧面说明，你也可以在技术上纯CSS做到这一点（虽然，这是一个有点棘手，你会使用一个复选框瓦特/标签的话）。

此外，我看到您的className =代码，所以我想特别指出我的代码中的Element.classList位。它配备了.add(),.remove(),.toggle()等有用的方法。

来源

2016-12-06 07:18:43 Andrew

谢谢@Andrew –

@Mint没有问题:)随意接受我的答案是否符合您的需求 – Andrew

您可以使用jQuery来降低你的编码工作选择li。以下是您需要的唯一代码。

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>

来源

2016-12-06 08:01:34 WebSwami

谢谢@WebSwarmi。那工作好奇。现在，当我再次单击它们时，我需要隐藏菜单。我似乎无法让他们工作。 –

谢谢@WebSwami。我有限的知识限制了我。感谢你，我学到了新的东西。祝你有个愉快的日子:) –

@Mint这就是为什么我们在这里在stackoverflow来丰富我们的知识:) – WebSwami

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

回答

相关问题