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，例如：

，您的代码没有任何问题
<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);

将输出当前网址。

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

Answer 2

在href中使用与每个页面对应的单独URL。因此，当刷新页面时，URL将被更改，页面上的菜单将确切地知道当前打开了哪个页面以及哪个菜单必须可见。

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

2 个答案: