当点击菜单怎么收起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@font-face{
font-family: "iconfont";
src:url("font/iconfont.eot");
src:url("font/iconfont.eot") format("embedded-opentype"),
url("font/iconfont.woff") format("woff"),
url("font/iconfont.ttf") format("ttf"),
url("font/iconfont.svg#iconfog") format("svg");
}
body{
margin: 0;
padding: 0;
}
a{text-decoration: none}
.menu-content{
width: 180px;
height:100%;
position: fixed;
left: 0;
box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
}
.menu-item{
font-size: 16px;
position: relative;
/*padding: 0 20px;*/
}
.menu-item a span{
display: block;
color:#777;
text-align: center;
letter-spacing: 4px;
height: 50px;
line-height: 50px;
}
.menu-item a::after{
content:'';
width:calc(100% - 40px);/*如果两边都要留空位的话就需要计算宽度*/
height:1px;
background-color:#ddd;
bottom:0;
left:20px;
position:absolute;
/*border-bottom: 1px solid #ddd;*/
}
.menu_list a{
display: block;
text-align: center;
padding: 10px 0;
color: #777;
}
.menu_list_active{
background:#00CCCC;
color: #fff !important;
}
</style>
</head>
<body>
<!--主菜单-->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="#">
<span>首页</span>
</a>
</div>
<div class="menu_list">
<a href="#">首页二级菜单</a>
<a href="#">首页二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>外观</span>
</a>
</div>
<div class="menu_list">
<a href="#">外观二级菜单</a>
<a href="#">外观二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>配置</span>
</a>
</div>
<div class="menu_list">
<a href="#">配置二级菜单</a>
<a href="#">配置二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>说明</span>
</a>
</div>
<div class="menu_list">
<a href="#">说明二级级菜单</a>
<a href="#">说明二级级菜单</a>
</div>
</div>
<!--子菜单-->
<script>
(function(){
var menucontent=document.getElementById("menu-content");
var menuitem=menucontent.getElementsByTagName("span");
var menulist=menucontent.getElementsByClassName("menu_list");
var len=menulist.length;
var index=0;
function menuchange(){
for(var i=0;i<len;i++){
menulist[i].style.display='none';
}
for(var d=0;d<len;d++){
menuitem[d].id=d;
menuitem[d].onclick=function(){
index=this.id;
turnOff();
}
}
}
menuchange();
function turnOff(){
for(var i=0;i<len;i++){
menulist[i].style.display='none';
}
menulist[index].style.display='block';
}
}())
</script>
</body>
</html>我自己写了一个侧边栏菜单，一切正常，就是展开后，点击它怎么把它收起来，在点击再展开
90
收起
正在回答
5回答
你好，可在单击使其显示时添加一个标记，下次单击时，判断这个标记是否存在，若存在，这使其隐藏，然后改变标记，可参考下列代码；
<script>
(function(){
var menucontent=document.getElementById("menu-content");
var menuitem=menucontent.getElementsByTagName("span");
var menulist=menucontent.getElementsByClassName("menu_list");
var len=menulist.length;
var index=0;
function menuchange(){
for(var i=0;i<len;i++){
menulist[i].style.display='none';
}
for(var d=0;d<len;d++){
menuitem[d].id=d;
menuitem[d].onclick=function(){
index=this.id;
if(this.getAttribute("data")== "yes"){
menulist[index].style.display='none';
menuitem[index].setAttribute('data','no');
}else{
for(var i=0;i<len;i++){
menulist[i].style.display='none';
menuitem[i].setAttribute('data','no');
}
menulist[index].style.display='block';
this.setAttribute('data','yes');
}
}
}
}
menuchange();
}())
</script>祝学习愉快！
好帮手慕糖
2017-07-11 17:03:50
你好，你要实现的这个效果，实际中并不怎么用到，且这样的体验效果不好，不建议使用。你从新写这个写法有些麻烦，在原来的代码基础上进行了更改，达到了效果，代码可参考以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@font-face{
font-family: "iconfont";
src:url("font/iconfont.eot");
src:url("font/iconfont.eot") format("embedded-opentype"),
url("font/iconfont.woff") format("woff"),
url("font/iconfont.ttf") format("ttf"),
url("font/iconfont.svg#iconfog") format("svg");
}
body{
margin: 0;
padding: 0;
}
a{text-decoration: none}
.menu-content{
width: 180px;
height:100%;
position: fixed;
left: 0;
box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
}
.menu-item{
font-size: 16px;
position: relative;
/*padding: 0 20px;*/
}
.menu-item a span{
display: block;
color:#777;
text-align: center;
letter-spacing: 4px;
height: 50px;
line-height: 50px;
}
.menu-item a::after{
content:'';
width:calc(100% - 40px);/*如果两边都要留空位的话就需要计算宽度*/
height:1px;
background-color:#ddd;
bottom:0;
left:20px;
position:absolute;
/*border-bottom: 1px solid #ddd;*/
}
.menu_list a{
display: block;
text-align: center;
padding: 10px 0;
color: #777;
}
.menu_list_active{
background:#00CCCC;
color: #fff !important;
}
</style>
</head>
<body>
<!--主菜单-->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="#">
<span>首页</span>
</a>
</div>
<div class="menu_list">
<a class="bg" href="#">首页二级菜单</a>
<a class="bg" href="#">首页二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>外观</span>
</a>
</div>
<div class="menu_list">
<a class="bg" href="#">外观二级菜单</a>
<a class="bg" href="#">外观二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>配置</span>
</a>
</div>
<div class="menu_list" >
<a class="bg" href="#">配置二级菜单</a>
<a class="bg" href="#">配置二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>说明</span>
</a>
</div>
<div class="menu_list">
<a class="bg" href="#">说明二级级菜单</a>
<a class="bg" href="#">说明二级级菜单</a>
</div>
</div>
<script>
(function(){
var menucontent=document.getElementById("menu-content");
var menuitem=menucontent.getElementsByTagName("span");
var menulist=menucontent.getElementsByClassName("menu_list");
var len=menulist.length;
var index=0;
function menuchange(){
for(var i=0;i<len;i++){
menulist[i].style.display='none';
}
for(var d=0;d<len;d++){
menuitem[d].id=d;
menuitem[d].onclick=function(){
index=this.id;
if(this.getAttribute("data")== "yes"){
menulist[index].style.display='none';
menuitem[index].setAttribute('data','no');
}else{
for(var i=0;i<len;i++){
menulist[i].style.display='none';
menuitem[i].setAttribute('data','no');
}
menulist[index].style.display='block';
this.setAttribute('data','yes');
}
}
}
}
var bg = document.getElementsByClassName("bg");
var biaozhi = "no"
for(var i = 0;i<bg.length;i++){
bg[i].onclick = function(){
if(biaozhi == "yes"){
for(var m=0;m<bg.length;m++){
bg[m].className="bg";
}
this.setAttribute("class","menu_list_active");
biaozhi = "no"
}else{
this.className="bg menu_list_active";
biaozhi = "yes"
}
}
}
menuchange();
}())
</script>
</body>
</html>祝学习愉快！
RenuMou
2017-07-11 11:28:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@font-face{
font-family: "iconfont";
src:url("font/iconfont.eot");
src:url("font/iconfont.eot") format("embedded-opentype"),
url("font/iconfont.woff") format("woff"),
url("font/iconfont.ttf") format("ttf"),
url("font/iconfont.svg#iconfog") format("svg");
}
body{
margin: 0;
padding: 0;
}
a{text-decoration: none}
.menu-content{
width: 180px;
height:100%;
position: fixed;
left: 0;
box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
}
.menu-item{
font-size: 16px;
position: relative;
/*padding: 0 20px;*/
}
.menu-item a span{
display: block;
color:#777;
text-align: center;
letter-spacing: 4px;
height: 50px;
line-height: 50px;
}
.menu-item a::after{
content:'';
width:calc(100% - 40px);/*如果两边都要留空位的话就需要计算宽度*/
height:1px;
background-color:#ddd;
bottom:0;
left:20px;
position:absolute;
/*border-bottom: 1px solid #ddd;*/
}
.menu_list a{
display: block;
text-align: center;
padding: 10px 0;
color: #777;
}
.menu_list_active{
background:#00CCCC;
color: #fff !important;
}
</style>
</head>
<body>
<!--主菜单-->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="#">
<span>首页</span>
</a>
</div>
<div class="menu_list">
<a href="#">首页二级菜单</a>
<a href="#">首页二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>外观</span>
</a>
</div>
<div class="menu_list">
<a href="#">外观二级菜单</a>
<a href="#">外观二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>配置</span>
</a>
</div>
<div class="menu_list" >
<a href="#">配置二级菜单</a>
<a href="#">配置二级菜单</a>
</div>
<div class="menu-item">
<a href="#">
<span>说明</span>
</a>
</div>
<div class="menu_list">
<a href="#">说明二级级菜单</a>
<a href="#">说明二级级菜单</a>
</div>
</div>
<script>
(function(){
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var menucontent=document.querySelector("#menu-content");
var pageElem={
menuitem:menucontent.getElementsByTagName("span"),
menulist:menucontent.querySelectorAll('.menu_list')
}
var len=pageElem.menuitem.length,
index=0,
change=0;
function menuchange(){
for(var i=0;i<len;i++){
pageElem.menulist[i].style.display='none';
}
for(var d=0;d<len;d++){
pageElem.menuitem[d].id=d;
pageElem.menuitem[d].onclick=function(){
index=this.id;
if(change!=index){
change=index;
var item1 =pageElem.menulist[index].getElementsByTagName("a");
for(var h=0;h<item1.length;h++){
item1[h].className="";
}
}
if(this.getAttribute("data")=="yes"){
pageElem.menulist[index].style.display='none';
pageElem.menuitem[index].setAttribute('data','no');
}else{
for(var i=0;i<len;i++){
pageElem.menulist[i].style.display='none';
pageElem.menuitem[i].setAttribute('data','no');
}
pageElem.menulist[index].style.display='block';
this.setAttribute('data','yes');
}
var item=pageElem.menulist[index].getElementsByTagName("a");
changeActive(item);
}
}
function changeActive(item){
for(var k=0;k<item.length;k++){
item[k].setAttribute("index",k);
item[k].onclick=function(){
var idx=this.getAttribute("index");
for(var i=0;i<item.length;i++){
item[i].className="";
}
item[idx].className="menu_list_active";
}
}
}
}
menuchange();
}())
</script>
</body>
</html>
想要达到的效果是，只要还未点击下一个主菜单的子菜单，当前选中的子菜单 样式不发生改变。
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星