JavaScript-javascript折叠菜单

JavaScript-javascript折叠菜单

晚风撩人 发布于 2017-07-18 字数 5185 浏览 1102 回复 2

我在网上看到段javascript的代码,我现在改了一下,能够执行,但问题是,如果我在二级菜单当中加入网址,所有的菜单就都折叠起来了,我不知道怎么改能让当前选中的菜单不折叠起来。
比如我点产品说明里的产品特色,然后页面就刷新,所有的菜单都折叠起来了,但是我不希望产品说明也折叠起来。

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">

//加载点击下拉菜单的联动效果
function getUrlPara(paraName){
var sUrl = location.href;
var sReg = "(?:\?|&){1}"+paraName+"=([^&]*)"
var re=new RegExp(sReg,"gi");
re.exec(sUrl);
return RegExp.$1;
}


var productServer = getUrlPara("lk");
if (productServer > 1){
sethdHelper('productServer', 'PDSL', productServer, 6)
}
//点击该控件时展开该控件下的子菜单,收起其他菜单
function sethdHelper(name, linkStr, crow, total) {
for (i = 1; i <= total; i++) {
//获取productServer_1
var menu = document.getElementById(name + "_" + i);
//PDSL_6添加链接样式
var link = document.getElementById(linkStr + "_" + i);
link.className = i == crow ? "cur" : "";

var list = document.getElementById("lists_" + name + "_" + i);
list.style.display = i == crow ? "block" : "none";
}
}

</script>
</head>
<body>
<div class="cont_left">
<ul class="menu">
<li class="level1" id="productServer_1"><a id="PDSL_1" href="javascript:sethdHelper('productServer','PDSL',1,6)">
产品说明</a>
<ul class="level2 tab" id="lists_productServer_1" style="display: none;">
<li><a href="456.jsp?lk=1">产品特色</a></li>
<li><a href="456.jsp?lk=1">产品构成</a></li>
<li><a href="456.jsp?lk=1">服务模式</a></li>
</ul>
</li>
<li class="level1" id="productServer_2"><a id="PDSL_2" href="javascript:sethdHelper('productServer','PDSL',2,6)">
产品购买指南</a>
<ul class="level2 tab" id="lists_productServer_2" style="display: none;">
<li><a href="456.jsp?lk=2">如何购买</a></li>
<li><a href="456.jsp?lk=2">在线订购</a></li>
<li><a href="456.jsp?lk=2">付款方式</a></li>
<li><a href="456.jsp?lk=2">产品列表</a></li>
<li><a href="456.jsp?lk=2">专业软件定制</a></li>
</ul>
</li>
<li class="level1" id="productServer_3"><a id="PDSL_3" href="javascript:sethdHelper('productServer','PDSL',3,6)">
我要试用</a>
<ul class="level2 tab" id="lists_productServer_3" style="display: none;">
<li class="level1"><a href="Pro_Try.aspx?lk=3">我要试用</a> </li>
</ul>
</li>
<li class="level1" id="productServer_4"><a id="PDSL_4" href="javascript:sethdHelper('productServer','PDSL',4,6)">
代理专区</a>
<ul class="level2 tab" id="lists_productServer_4" style="display: none;">
<li><a href="HelpContent.aspx?lk=4&hId=125">代理流程</a></li>
</ul>
</li>
<li class="level1" id="productServer_5"><a id="PDSL_5" href="javascript:sethdHelper('productServer','PDSL',5,6)">
客服中心</a>
<ul class="level2 tab" id="lists_productServer_5" style="display: none;">
<li><a href="HelpContent.aspx?lk=5&hId=126">常见问题解答</a></li>
</ul>
</li>
<li class="level1" id="productServer_6"><a id="PDSL_6" href="javascript:sethdHelper('productServer','PDSL',6,6)">
联系我们</a>
<ul class="level2 tab" id="lists_productServer_6" style="display: none;">
<li><a href="HelpContent.aspx?lk=6&hId=127">联系我们</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

泛泛之交 2017-08-30 2 楼

要实现你说的功能,
1. 用iframe,变动的内容都在iframe页面中,而不变的内容都在主页面中
2. 通过js判断当前的url,如果是2级菜单中的一个,就通过js展开2级菜单。

偏爱自由 2017-08-16 1 楼

点击链接页面肯定就刷新,菜单肯定都会折叠起来,除非你子菜单不要链接到其他网页去。
想达到那种效果不应该使用这样的结构。