點擊子菜單必須保持打開狀態

Question

我有一個包含一些子菜單項的垂直菜單，此子菜單在點擊時打開。 但問題是，當我點擊子菜單項之一，菜單關閉，而我希望它保持開放，因爲當我瀏覽的子菜單項 這裏的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'; 

} 

Answer 1

<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

Answer 2

是你的問題，你需要記住子菜單的可見性狀態，一旦你敲擊子項？

如果是這樣，您需要記住子菜單的狀態。您可以使用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

退房這裏

http://jsfiddle.net/urbanbjorkman/jGwnz/

Answer 3

城市比約克曼工作小提琴代替大多數JavaScript中的幾行，我用你的代碼，但什麼是錯的......是這樣嗎？

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