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

submenu on click must remain open

本文关键字：状态 菜单 单击      更新时间：2023-09-26

我有一个带有一些子菜单项的垂直菜单，这个子菜单在点击时打开。但问题是，当我单击其中一个子菜单项时，子菜单关闭，而我希望它保持打开状态，因为当我浏览子菜单项时这是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';
}

<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';
});
工作示例

是你的问题，你需要记住的可见状态的子菜单，一旦你点击子项?

如果是，您需要记住子菜单的状态。您可以使用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代码。

在这里查看工作小提琴

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

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>
相关文章：