JS菜单保持菜单状态

JS Menu keep menu state

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

我有这个HTML代码：

<div id="nav">
<li><a href="/admin/index.php" target="_top">Dashboard</a></li>
<li><a>Contacts</a>
    <ul>
    <li><strong>Companies</strong></li>
    <li><a href="/admin/customer/addcustomer.php" target="crm_frame">Add Company</a></li>
    <li><a href="/admin/customer/viewcustomer.php" target="crm_frame">View Company</a></li>
    </ul>
</li>
</div>

和这个JS:

<script>
$(document).ready(function () {
  $('#nav > li > a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#nav li ul').slideUp();
       $(this).next().slideToggle();
       $('#nav li a').removeClass('active');
       $(this).addClass('active');
     }
  });
});
</script>

对于我的垂直菜单，但我不知道如何在页面更改时保持菜单状态。

例如，如果

  • 被展开，如果页面发生变化，我如何保持它的展开？

    这是CSS到：

    #nav {
    float: left;
    margin-left:5px;
    margin-top:-20px;
    top:0;
    left:0;
    width: 100%; 
    list-style:none;
}
#nav li a {
    display: block; 
    padding: 8px 10px;
    margin-bottom:0;
    background: #666666; 
    border-top: 1px solid #EEEEEE; 
    border-bottom: 1px solid #EEEEEE; 
    text-decoration: none; 
    color: #EEEEEE;
    width:155px;
}
#nav li a:hover, #nav li a.active {
    background: #F36F25; 
    color: #FFFFFF;
    cursor:pointer;
}
#nav li ul {
    display: none;
    list-style:none;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background: #EEEEEE;
    color:#666666;
    border:1px solid #EEEEEE;
}
#nav li ul li a:hover {
    background: #EEEEEE;
    color:#f36f25;
    border:1px solid #f36f25;
}

    • 我建议在这种情况下使用sessionStorage。在这种情况下，它是一个很好的工具，并且得到了广泛支持，但请参阅http://caniuse.com/namevalue-storage看看它是否适合你的需求。您可以使用sessionStorage跟踪（客户端）当前展开的菜单，以便在页面重新加载时展开正确的菜单。这个答案不是100%正确的，因为你不能直接把它插入你的代码中（我不得不猜测几件事），但它应该让你知道该去哪里。请注意，在下面的代码中，我将链接hrefs改为指向JSFiddle，因为这是我制作工作示例的地方，但希望这将使您走上在自己的页面中实现它的正确轨道。

    需要更改的主要内容之一是给主菜单<a>标签一个ID（下面是menuDashboard和menuContacts）。这些必须在不同的页面上保持一致，而且下面的脚本必须包含在您想要保持菜单状态的所有页面中。然后，基本前提是，在单击菜单时，我们将当前扩展的菜单<a> ID存储到sessionStorage中，以便在页面重新加载后访问该ID。然后，在页面加载时，我们查看sessionStorage，以查看之前通过检索关键字"activeMenuItemID"选择的内容，如果发现没有未定义，则展开该菜单项。

    工作示例：http://jsfiddle.net/VBLS8/2/show/注意，由于JSFiddle是如何构建的，上一个链接是直接指向JSFiddleResults iframe的链接。否则，当单击链接时，JSFiddl就会中断。实际的JSFiddle在这里：http://jsfiddle.net/VBLS8/2/.

    <br/>
<div id="nav">
<li>
    <a id="menuDashboard">Dashboard</a>
    <ul>
        <li><strong>Sub Category</strong></li>
        <li><a href="http://jsfiddle.net/VBLS8/2/show/">Sample 1</a></li>
        <li><a href="http://jsfiddle.net/VBLS8/2/show/">Sample 2</a></li>
    </ul>
</li>
<li>
    <a id="menuContacts">Contacts</a>
    <ul>
        <li><strong>Companies</strong></li>
        <li><a href="http://jsfiddle.net/VBLS8/2/show/">Add Company</a></li>
    <li><a href="http://jsfiddle.net/VBLS8/2/show/">View Company</a></li>
</ul>

    JavaScript:

    $(document).ready(function(){
    //Loop through nav items, compare to expanded item ID from sessionStorage so we can expand whichever item was previously expanded
    if(sessionStorage.getItem("activeMenuItemID") != undefined){
        $("#nav > li > a").each(function(){
            if ($(this).attr("id") == sessionStorage.getItem("activeMenuItemID")){
                expandMenuItem(this);
            }
        });
    }
    $('#nav > li > a').click(function(elem){
        expandMenuItem(this);
    });
});
function expandMenuItem(elem){
    if ($(elem).attr('class') != 'active'){
        $('#nav li ul').slideUp();
        $('#nav > li > a').removeClass("active");
        $(elem).addClass("active");
        $(elem).next().slideToggle();
        sessionStorage.setItem("activeMenuItemID", $(elem).attr("id"));
    }
}

    当页面更改时，点击处理程序被绑定，但没有处理菜单初始状态的语句。

    所以。。。

    $(document).ready(function() {
    //original click handler
    //$('#nav a').click     
    //but also this piece of code, that will display all the lists having an .active link inside
    $('#nav ul').has('a.active').show();
});

    祝你好运！跟踪当前活动页面的一个快速但有点脏的解决方案是将目标框架的src属性与链接的href属性进行比较。

    编辑：以下fiddle可能会对您有所帮助：fiddle

    相关文章：