Question

我创建了一个简单的手风琴菜单（类型），我遇到的第一个问题是当我想要使各个锚点处于活动状态的页面时，我已经通过使用脚本解决了它，但另一个问题是当从扩展菜单转到另一个页面时，我希望在到达打开的页面时打开扩展菜单。我尝试了很多方法，但它没有用。

HTML

<ul id="menu">
    <li><a href="index.html">index</a></li>
    <li><a href="forum.html">forum</a></li>
    <li id="submenu"><span class="s_act">links</span>
        <ul>
            <li><a href="index1.html">index</a></li>
            <li><a href="index2.html">index</a></li>
        </ul>
    </li>
</ul>

脚本

//To make the current link active
$(function(){
    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    $('a[href="'+ sPage +'"]').parent().addClass('active');
});

//Toggling the submenu
$(document).ready(function(){

    $("#submenu ul").hide();

    $("#submenu").click(function () {

        $("span.s_act").addClass("submenu_act");
        $("#submenu ul").show();

     });

});

Answer 1

在您的母版页上使用以下jQuery：

$(document).ready(function(){
    var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)/, "$1");

        $('#menu li').removeClass("active");
        $("#submenu ul").hide();

        ///// Apply active class to selected page link
        $('#menu li a').each(function () {

            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
            {

                  $(this).closest('li').closest('li').addClass('active');
                  if($(this).parent().closest('li').attr('class') == 'submenu')  
                      $("#submenu ul").show();

             }
        });

});

Answer 2

这是一个AJAX解决方案，它可以帮助您的导航在调用各种页面时保持其状态：

粗糙的HTML标记：

<body>
    <ul id="menu">
        <li><a href="index.html">index</a></li>
        <li><a href="forum.html">forum</a></li>
        <li id="submenu"><span class="s_act">links</span>
            <ul>
                <li><a href="index1.html">index</a></li>
                <li><a href="index2.html">index</a></li>
            </ul>
        </li>
    </ul>
    <div id="content">
      <!--Page Content Goes Here-->
    </div>
</body>

使用Javascript：

$(document).ready(function(){
    $("#submenu ul").hide();
    $("#submenu").click(function () {
        $("span.s_act").addClass("submenu_act");
        $("#submenu ul").show();
     });
     $("#submenu ul li a").click(function(e){
         e.preventDefault();
         var page = $(this).attr('href');
         $.get(page, function(html){
            $('#content').html(html);
         });
     });
});

转到新页面时保持展开的菜单打开

2 个答案: