当点击菜单怎么收起

当点击菜单怎么收起

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

我自己写了一个侧边栏菜单，一切正常，就是展开后，点击它怎么把它收起来，在点击再展开
RenuMou 2017-07-10
源自：项目：JavaScript实现轮播特效   5-4 二级菜单的展开与收起
90
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

5回答
好帮手慕糖 回答被采纳获得+3积分 2017-07-10 17:46:14

你好，可在单击使其显示时添加一个标记，下次单击时，判断这个标记是否存在，若存在，这使其隐藏，然后改变标记，可参考下列代码；

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

祝学习愉快！

0
收起回答
  • RenuMou 提问者 #1
    谢谢 小丸子助教！！
    2017-07-10 20:21:00
  • RenuMou 提问者 #2
    我还有一个问题。
    2017-07-10 20:47:45
  • RenuMou 提问者 #3
    我又继续优化了一下，还有一个问题 请你帮忙看看，代码我贴在下面回复里
    2017-07-11 11:26:57
好帮手慕糖 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>

祝学习愉快！

0
收起回答
  • 提问者 RenuMou #1
    谢谢你！！！！
    2017-07-12 08:44:33
提问者 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>

 

想要达到的效果是，只要还未点击下一个主菜单的子菜单，当前选中的子菜单 样式不发生改变。

0
收起回答
  • 好帮手慕糖 #1
    你好，因为你写的是二级的折叠菜单，当点击下一个主菜单时，当一个主菜单所对应的子菜单是折叠的，是看不到样式的，祝学习愉快！
    2017-07-11 11:46:36
  • 提问者 RenuMou 回复 好帮手慕糖 #2
    助教我的意思是 当我们展开第一顶级 在里面随意选了一个子级，这个被选中的子级 会被赋予特殊的样式。这时候我们去点击第2个或其它顶级，但并未选中这些顶级下面的子级，但我们在回到第一个顶级时，曾经被我们选中的子级 的特殊样式不变
    2017-07-11 14:46:39
  • 提问者 RenuMou 回复 好帮手慕糖 #3
    我们在用二级菜单时 经常是在停留在一个顶级 下面的子级，但又想知道其他顶级下面的内容，于是点开看，但并没有操作下面的子级，在回到当前页面的顶级菜单，应该还是让用户知道 自己还停留在那个 子级里。
    2017-07-11 14:47:06
好帮手慕糖 2017-07-11 09:33:04

你好，若这里封装成函数，就无法使用this，this是获取不到的，可改为如下形式，

function turnoff(){

    for(var i=0;i<len;i++){

            menulist[i].style.display='none';

            menuitem[i].setAttribute('data','no');

          }  

          menulist[index].style.display='block';

          menuitem[index].setAttribute('data','yes');

        } 

  }

祝学习愉快！

0
收起回答
  • 提问者 RenuMou #1
    非常感谢你！！
    2017-07-11 09:50:53
提问者 RenuMou 2017-07-10 20:46:40

我还有一个问题 我把代码封装成函数，为什么出现这个错误？

http://img1.sycdn.imooc.com/climg//596377240001564907930153.jpg

http://img1.sycdn.imooc.com/climg//596377240001432308980478.jpg


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

案例那个将子菜单收起来的盒子怎么调出来的
14 1 3
主要问题，当鼠标离开菜单区域时，如何去掉主菜单中的背景颜色
0 0 3
点击留言跳转到那个表单怎么实现的
1 0 3
关于6-2作业问题，点击切换这里出了点问题，大神来帮我看一下
36 0 3
滑过主菜单显示问题
0 0 4

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师