Question

我正在尝试实现在页面重新加载到所点击的链接时选择的选项卡上保持菜单打开。

这是html代码：

<nav>
  <ul id="nav">
    <li><a href="#"><img  id="icon" src="icons/setup(48).png" />Setup</a>
      <ul>
        <li><a href="test.html">Test</a></li>
        <li><a href="test.html">Test</a></li>
        <li><a href="test.html">Test</a></li>
        <li><a href="test.html">Test</a></li>
      </ul>
    </li>
    <li><a href="#"><img  id="icon" src="icons/userProfile_48.png" />User Maintenance</a>

    </li>
    <li><a href="#"><img id="icon" src="icons/projects.png" />Projects</a>
      <ul>
        <li><a href="#">Project Title</a></li>
        <li><a href="#">Project Title</a></li>
        <li><a href="#">Project Title</a></li>
        <li><a href="#">Project Title</a></li>
        <li><a href="#">Project Title</a></li>
        <li><a href="#">Project Title</a></li>
        <li><a href="#">Project Title</a></li>
        <li><a href="#">Project Title</a></li>
      </ul>
    </li>

  </ul>
</nav>

这是jQuery：

 $(document).ready(function(){
     $("#nav > li > a").on("click", function(e){
         if($(this).parent().has("ul")) {
             e.preventDefault();
         }

         if(!$(this).hasClass("open")) {
         // hide any open menus and remove all other classes
             $("#nav li ul").slideUp(300);
             $("#nav li a").removeClass("open");

             // open our new menu and add the open class
             $(this).next("ul").slideDown(300);
             $(this).addClass("open");
         }

         else if($(this).hasClass("open")) {
             $(this).removeClass("open");
             $(this).next("ul").slideUp(300);
         }
     });
 });

目前，当它选择一个链接并重定向到该页面时它正常工作，但它只是不会在它加载的新页面上打开菜单选项卡。

一些帮助会很棒。感谢

这部分是为了帮助在页面加载时保持菜单打开。

<script>

$(document).ready(function () {
    $("#nav li a").click(function (e) {

        if ($(this).next("ul").length > 0) {

            e.preventDefault();     
            var navInner = $(this).next("ul");

            if (navInner.is(":visible")) {

            }

        }

    });
});

Answer 1

您需要将选项卡打开的信息传递给新页面，并在页面加载后重新打开选项卡。

有两种选择：

通过注册onclick-Event将信息附加到链接，以便在浏览器开始导航到目标URL之前对其进行修改。
将信息保存在您可以从Javascript访问的会话cookie中。

Answer 2

我使用相同的脚本。

这就是我解决这个问题的方法：

<li><a href="#" class="articles <?php echo ($_GET['module'] == 'articles' ? 'open': ''); ?>">Articles</a>
  <ul>
    <li><a href="admin.php?module=articles">Manager</a></li>
    <li><a href="admin.php?module=articles">Categories</a></li>
    <li><a href="admin.php?module=articles">Featured</a></li>
    <li><a href="admin.php?module=articles">Add</a></li>
   </ul>    
</li>

并将该行添加到JQuery脚本：

$(document).ready(function(){  
    $("#nav > li > a.open").next("ul").show();  // add this line here
$("#nav > li > a").on("click", function(e){ ............

您还可以向包含您要展开的<li>的父<ul>添加一些课程对于expample文章，然后在head：

<script type="text/javascript">
  $(document).ready(function(){
    $(".menu-list > li > a.articles").next("ul").show();
  });
</script>

我不知道这是否正确，但它有效;）

如何使用手风琴下拉菜单在页面重新加载时打开菜单？

2 个答案: