单击时的子菜单必须保持打开状态
单击时的子菜单必须保持打开状态
提问于 2014-03-13 20:00:49
我有一个带有一些子菜单项的垂直菜单，单击一下就会打开这个子菜单。但问题是，当我单击其中一个子菜单项时，子菜单关闭，而我希望它保持打开状态，因为当我浏览子菜单项时，下面是html：
<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="index.html"><strong>HOME</strong></a></li>
<li><a href="javascript:void(0)" onclick="toggleID('sub1')">COLLECTIONS</a>
<ul class="subnav" id="sub1" style="display:none">
<li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a>
<li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a>
<li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a>
<li class="first"><a href="Collections.html">autumn/winter 2011</a>
</ul>
</li>
<li><a href="Portrait.html">PORTRAIT</a></li>
<li><a href="Heritage.html">HERITAGE</a></li>
<li><a href="Press.html">PRESS</a></li>
<li><a href="Contacts.html">CONTACTS</a></li>
</ul>
</div>和js
function toggleID(IDS) {
var sel = document.getElementById('nav').getElementsByTagName('ul');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
sel = document.getElementById(IDS);
sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';
}回答 3
Stack Overflow用户
发布于 2014-03-13 20:12:21
<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="#"><strong>HOME</strong></a></li>
<li><a href="javascript:void(0)" id="test" onclick="toggleID('sub1');">COLLECTIONS</a>
<ul class="subnav" id="sub1" style="display:none">
<li class="first"><a href="#">spring/summer 2013</a></li>
<li class="first"><a href="#">autumn/winter 2013</a></li>
<li class="first"><a href="#">autumn/winter 2012</a></li>
<li class="first"><a href="#">autumn/winter 2011</a></li>
</ul>
</li>
<li><a href="#">PORTRAIT</a></li>
<li><a href="#">HERITAGE</a></li>
<li><a href="#">PRESS</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>
$("#test").click(function() {
var sel = document.getElementById('nav').getElementsByTagName('ul');
for (var i = 0; i < sel.length; i++) {
if (sel[i].id != 'sub1') {
sel[i].style.display = 'none';
}
}
sel = document.getElementById('sub1');
sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';
});Working Example
Stack Overflow用户
发布于 2014-03-13 20:49:48
你的问题是，当你点击子项时，你需要记住子菜单的可见性状态吗？
如果是这样，您需要记住子菜单的状态。您可以使用cookie或本地存储来完成此任务。
Html (只是一些小的改变，比如移除onclick和修复html)
<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="index.html"><strong>HOME</strong></a></li>
<li><a href="javascript:void(0)">COLLECTIONS</a>
<ul class="subnav" id="sub1">
<li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a></li>
<li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a></li>
<li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a></li>
<li class="first"><a href="Collections.html">autumn/winter 2011</a></li>
</ul>
</li>
<li><a href="Portrait.html">PORTRAIT</a></li>
<li><a href="Heritage.html">HERITAGE</a></li>
<li><a href="Press.html">PRESS</a></li>
<li><a href="Contacts.html">CONTACTS</a></li>
</ul>
</div>Javascript (结合使用jquery和localstorage)
if(localStorage.getItem("state") == "closed") // <-- this checks closed/open state and sets subnav accordingly
$('.subnav').hide();
$('.subnav').parent().click(function () {
$(this).find('#sub1').toggle(); //<-- This toggles the menu open/close
// ** Remeber state ** //
if (localStorage.getItem("state") == "open") {
localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates
} else {
localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
}
// ** Remeber state ** //
});我的示例使用jquery，如果您有可能开始使用它，您应该这样做。您可以使用jquery用几行代码替换大部分javascript
在这里查看working fiddle
http://jsfiddle.net/urbanbjorkman/jGwnz/
Stack Overflow用户
发布于 2014-03-14 23:39:59
城市比约克曼，我使用你的代码，但有些东西是wrong...is，对吗？
<html>
<head>
<script type="text/javascript" >
if (localStorage.getItem("state") == "closed") // <-- this checks closed/open state and sets subnav accordingly
$('.subnav').hide();
$('.subnav').parent().click(function () {
$(this).find('#sub1').toggle(); //<-- This toggles the menu open/close
// ** Block to remeber state ** //
if (localStorage.getItem("state") == "open") {
localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates
} else {
localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
}
// ** Block to remeber state ** //
});
</script>
</head>
<body>
<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
<li><a id="active" href="index.html"><strong>HOME</strong></a>
</li>
<li><a href="javascript:void(0)">COLLECTIONS</a>
<ul class="subnav" id="sub1">
<li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a>
</li>
<li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a>
</li>
<li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a>
</li>
<li class="first"><a href="Collections.html">autumn/winter 2011</a>
</li>
</ul>
</li>
<li><a href="Portrait.html">PORTRAIT</a>
</li>
<li><a href="Heritage.html">HERITAGE</a>
</li>
<li><a href="Press.html">PRESS</a>
</li>
<li><a href="Contacts.html">CONTACTS</a>
</li>
</ul>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22377994
复制相关文章
相似问题
腾讯云开发者
