导航菜单更改为js点击展开 10

<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>菜单</title><styletype="text/css"... <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜单</title>
<style type="text/css">
body {
font: 90%/160% Arial, Helvetica, sans-serif;
color: #666;
width: 900px;
max-width: 96%;
margin: 0 auto;
}
h4{font-size:14px; line-height:30px}
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
border-radius: 5px;
}
.nav li {
display: none;
margin: 0;
}
.nav .current {
display: block;
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav.right ul {
left: auto;
right: 0;
}
.nav.center ul {
left: 50%;
margin-left: -90px;
}
</style>
</head>
<body>
<nav class="nav center">
<ul>
<li><a href="#">首页</a></li>
<li class="current"><a href="#">客户服务</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
</html>
以上代码是css鼠标经过展开，我想更改为js点击展开。 展开
 我来答
1个回答
#热议# 海关有哪些禁运商品？查到后怎么办？
yugi111
2015-09-10 · TA获得超过8.1万个赞
知道大有可为答主
回答量：5.1万
采纳率：70%
帮助的人：1.3亿
我也去答题访问个人页
展开全部 
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font: 12px "宋体";
    padding-top: 20px;
}

#menu {
    width: 200px;
    margin: auto;
}

#menu h1 {
    cursor: pointer;
    color: #FFF;
    font-size: 12px;
    padding: 5px 0 3px 10px;
    border: #C60 1px solid;
    margin-top: 1px;
    background-color: #F93;
}

#menu h2 {
    cursor: pointer;
    color: #777;
    font-size: 12px;
    padding: 5px 0 3px 10px;
    border: #E7E7E7 1px solid;
    border-top-color: #FFF;
    background-color: #F4F4F4;
}

#menu ul {
    padding-left: 15px;
    height: 100px;
    border: #E7E7E7 1px solid;
    border-top: none;
    overflow: auto;
}

#menu ul li {
    padding: 5px 0 3px 10px;
}

.no {
    display: none;
}
    </style>
    <script language="JavaScript">
        function ShowMenu(obj, noid) {
            var block = document.getElementById(noid);
            var n = noid.substr(noid.length - 1);
            if (noid.length == 4) {
                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
                for (var i = 0; i < h2.length; i++) {
                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
                    h2[i].style.color = "";
                }
                obj.style.color = "#FF0000";
                for (var i = 0; i < ul.length; i++) {
                    if (i != n) {
                        ul[i].className = "no";
                    }
                }
            } else {
                var span = document.getElementById("menu").getElementsByTagName("span");
                var h1 = document.getElementById("menu").getElementsByTagName("h1");
                for (var i = 0; i < h1.length; i++) {
                    h1[i].innerHTML = h1[i].innerHTML.replace("+", "-");
                    h1[i].style.color = "";
                }
                obj.style.color = "#0000FF";
                for (var i = 0; i < span.length; i++) {
                    if (i != n) {
                        span[i].className = "no";
                    }
                }
            }
            if (block.className == "no") {
                block.className = "";
                obj.innerHTML = obj.innerHTML.replace("-", "+");
            } else {
                block.className = "no";
                obj.style.color = "";
            }
        }
    </script>
</head>

<body>
    <div id="menu">
        <h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>
        <span id="NO0" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>
   <ul id="NO00" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>
   <ul id="NO01" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>
   <ul id="NO02" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>
   <ul id="NO03" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
    <li>一级菜单A_7</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>
        <span id="NO1" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>
   <ul id="NO10" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>
   <ul id="NO11" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>
        <span id="NO2" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>
   <ul id="NO20" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
    <li>三级菜单C_5</li>
    <li>三级菜单C_6</li>
    <li>三级菜单C_7</li>
    <li>三级菜单C_8</li>
    <li>三级菜单C_9</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>
   <ul id="NO21" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>
        <span id="NO3" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>
   <ul id="NO30" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>
   <ul id="NO31" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
    <li>四级菜单D_4</li>
    <li>四级菜单D_5</li>
   </ul>
</span>
    </div>
</body>

</html>
追问
大哥    我就是想把这个代码更改为js点击展开 帮个忙为小弟写一个
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式