1

我有这个 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;
    }
    
  • 4

    2 回答 2

    0

    我建议在这种情况下使用 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"));
        }
    }
    
    于 2013-08-15T04:36:07.013 回答
    0

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

    所以...

    $(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 属性进行比较。

    编辑:以下小提琴可能会对您有所帮助:小提琴

    于 2013-08-14T16:16:00.867 回答