每个人,我一直在学习并尝试使用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 ></strong></a>
<ul>
<li><a href="#">Name </a></li>
<li><a href="#">Age</a></li>
</ul>
</li>
<li><a href="#"><strong>User 2 ></strong></a>
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Age</a></li>
</ul>
</li>
</div>
</div>
</ul>
</body>
答案 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 ></strong></a>
<ul>
<li><a href="#">Name </a>
</li>
<li><a href="#">Age</a>
</li>
</ul>
</li>
<li><a href="#"><strong>User 2 ></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 ></strong></a>
<ul>
<li><a href="#">Name </a>
</li>
<li><a href="#">Age</a>
</li>
</ul>
</li>
<li><a href="#"><strong>User 2 ></strong></a>
<ul>
<li><a href="#">Name</a>
</li>
<li><a href="#">Age</a>
</li>
</ul>
</li>
<li><a href="#"><strong>User 3 ></strong></a>
<ul>
<li><a href="#">Name</a>
</li>
<li><a href="#">Age</a>
</li>
</ul>
</li>
</div>
</div>
</ul>
</body>
答案 2 :(得分:0)
我制作了这个导航菜单供参考。它也会对屏幕尺寸做出响应。
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">☰</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;
作为旁注,你也可以在技术上用纯CSS做到这一点(但是,这有点棘手;你要使用带有标签的复选框)。
另外,我看到了您的className =
代码,因此我想在代码中明确指出Element.classList位。它附带.add()
,.remove()
,.toggle()
和其他有用的方法。