刷新后需要一个活动的子菜单（jquery 手风琴菜单）

Question

我用 jquery 创建了一个菜单，问题是当我单击子菜单时；站点刷新，然后菜单不保持活动状态，我希望它在单击时显示活动的菜单和子菜单.. 还创建了一个小提琴http://jsfiddle.net/akshaydesai/ptghs8xo/

<ul class="menu">

<li><div><a href="#">PRODUCTS</a></div>
    <ul>
        <li><a href="#">Scada Software</a></li>
        <li><a href="#">Energy Monitoring</a></li>
        <li><a href="#">Tension Monitoring</a></li>
        <li><a href="#">Protocol Gateways</a></li>
        <li><a href="#">Gas Monitoring</a></li>
                            <li><a href="#">Led Display</a></li>
                        </ul>
                    </li>

                <li><div><a href="#">SOLUTIONS</a></div>
                        <ul>
                            <li><a href="#">Power & energy</a></li>
                            <li><a href="#">Process Automation</a></li>
                            <li><a href="#">Medical Diagnostics</a></li>
                            <li><a href="#">Machine Tools</a></li>
                            <li><a href="#">Remote Monitoring</a></li>
                            <li><a href="#">Industries</a></li>
                        </ul>
                    </li>

                <li><div><a href="#">OUR EXPERTISE</a></div></li>
                <li><div><a href="#">ABOUT US</a></div></li>
                <li><div><a href="#">CONTACT US</a></div></li>

            </ul>

.menu ul{
    text-align:justify;
    width:300px;
    min-width:500px;
    margin-top:60px;
}
.menu ul:after{
    content:'';
    display:inline-block;
    width:100%;
}
.menu ul li{
    display:inline-block;
    list-style:none;
    white-space:nowrap;
    margin:0;
    padding:0;
}
.menu ul li a{
    text-decoration:none;
    color:#000;
}
.menu ul li:hover a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
    display:none;
}

.menu ul li:hover ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu ul li:hover ul li a{
    color:#000;
    border:none;
    margin-right:25px;
}
.menu ul li:hover ul li:hover a{
    color:#CCCC00;
}
.menu li.active a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu li.active ul li a{
    color:#000;
    margin-right:25px;
    border-bottom:none;
}
.menu li.active ul li:hover a{
    color:#CCCC00;
    margin-right:25px;
}
.hide{
    display:none;
}

$(document).ready(function(){

    $(".menu > li > div").click(function(){   
      if(false == $(this).next().is(':visible')) {
        $('.menu ul').slideUp(700);
      }
      $(this).next().slideToggle(700);
    });

    var url = window.location.href;
    var $current = $('.menu li ul a[href="' + url + '"]');
    $current.parents('.menu ul').slideToggle();
    $current.next('.menu ul').slideToggle();

});

Answer 1

在 href 中使用单独的 URL，对应于每个页面。因此，当页面刷新时，URL 将发生变化，页面上的菜单将准确地知道当前打开了哪个页面以及必须可见哪个菜单。

Answer 2

编辑 假设您设置了正确的href，您的代码没有任何问题，例如：

<li><a href="http://localhost/software">Scada Software</a></li> // I'm using a localhost example here just to simplify.

这行得通。如果没有，请检查网址：

在var url = window.location.href;之后直接添加

这个：console.log('url:' + url);

或者这个：alert('url:' + url);

会输出当前的url。

---

您还可以使用 cookie（或其他存储持久变量的方式）在刷新页面后调用活动状态。 这是一个在 jQuery 中使用 cookie 的示例：How to set/unset cookie with jQuery?