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或localstorage来完成此操作。

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（使用带有localstorage的jquery）

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

查看工作小提琴

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

Answer 3

Urban Bjorkman，我使用你的代码但出了点问题......是吗？

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

点击子菜单必须保持打开状态

3 个答案: