gpt4 book ai didi

javascript - JS Menu 保持菜单状态

转载 作者:太空宇宙 更新时间:2023-11-03 18:38:09 24 4
gpt4 key购买 nike

我有这个 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% 正确的,因为你不能直接将它插入你的代码中(我不得不猜测几件事)但它应该让你对去哪里有一个相当了解。请注意,在下面的代码中,我将链接 href 更改为指向 JSFiddle,因为这是我制作了一个工作示例的地方,但希望这会让您走上正确的轨道,在您自己的页面中实现它。

    需要更改的主要内容之一是提供主菜单 <a>标记一个 ID(在下面,它们是 menuDashboardmenuContacts )。这些必须在您的不同页面中保持一致,并且下面的脚本必须包含在您想要保持菜单状态的所有页面中。那么基本前提是在菜单点击时,我们存储当前展开的菜单<a> ID改成sessionStorage所以我们可以在页面重新加载后访问它。然后,在页面加载时,我们查看 sessionStorage通过检索 key "activeMenuItemID" 查看之前选择的内容,如果我们发现它不是未定义的,我们将展开该菜单项。

    工作示例: http://jsfiddle.net/VBLS8/2/show/请注意,由于 JSFiddle 的构建方式,前面的链接是直接指向 JSFiddle 结果 iframe 的链接。否则,当单击链接时,JSFiddle 就会中断。实际的 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"));
    }
    }

    关于javascript - JS Menu 保持菜单状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18236809/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com