单击子菜单列表项时，如何保持子菜单展开?使用cookie

How do you keep the sub menu expanded when a sub menu list item is clicked on? use cookie?

本文关键字：菜单 cookie 何保持 使用 列表 单击      更新时间：2023-09-26

我有一个使用jquery的扩展菜单。它工作得很好，除了一件事：当用户导航离开页面时，菜单会折叠。当用户单击任何最终的< li >链接时，我希望菜单保持打开状态。所有这些链接都打开同一个页面。这些页面上的内容是从数据库http://jsfiddle.net/lekien992/6kkd5fcx/5/ 中获取的

<body>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Cookie: <span id="display"></span>
</body>

请添加一些上下文来解释代码部分（或者检查您是否将所有问题错误地格式化为代码）。

这些页面上的内容是从数据库中获取的

我假设您的业务逻辑使用的是PHP。您所描述的问题可以通过确定您所在页面的"当前"li，然后将父li设置为.active来解决。当然，如果你的列表不仅嵌套了两次，而且嵌套了更多，你就需要冒泡了。

这不是一项琐碎的任务，而是一项复杂的任务，可以通过无数方式解决。由于您在问题中标记了javascript和jquery，并根据问题标题添加了cookies作为问题，因此我选择了与jquery相结合的PHP方式。此方法中未使用Cookie。

在本例中，我将通过以下方式确定打开的列表项：

  1. 首先检查打开的项目
  2. 在客户端上向上展开父列表元素

优点：易于实现，无限嵌套。

缺点：需要少量客户端处理。

在下面的示例中，我假设您知道当前正在查看的产品和页面。

<?php
    $current_page = $_GET['page'];
    $current_product = $_GET['product'];
?>
<body>
<div id='cssmenu'>
    <ul class='menu-root'>
        <li class='<?php if ($current_page == 'home') echo 'active' ?>'><a href='#'><span>Home</span></a></li>
        <li class='<?php if ($current_page == 'products') echo 'active' ?> has-sub'><a href='#'><span>Products</span></a>
            <ul>
                <li class='<?php if ($current_product == 'product_1') echo 'active active-base' ?> has-sub'><a href='#'><span>Product 1</span></a>
                    <ul>
                        <li class='<?php if ($current_product == 'product_1_sub_1') echo 'active active-base' ?>'><a href='#'><span>Sub Product</span></a></li>
                        <li class='<?php if ($current_product == 'product_1_sub_2') echo 'active active-base' ?> last'><a href='#'><span>Sub Product</span></a></li>
                    </ul>
                </li>
                <li class='<?php if ($current_product == 'product_2') echo 'active active-base' ?> has-sub'><a href='#'><span>Product 2</span></a>
                    <ul>
                        <li class='<?php if ($current_product == 'product_2_sub_1') echo 'active active-base' ?>'><a href='#'><span>Sub Product</span></a></li>
                        <li class='<?php if ($current_product == 'product_2_sub_2') echo 'active active-base' ?> last'><a href='#'><span>Sub Product</span></a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class='<?php if ($current_page == 'about') echo 'active' ?>'><a href='#'><span>About</span></a></li>
        <li class='<?php if ($current_page == 'contact') echo 'active' ?> last'><a href='#'><span>Contact</span></a></li>
    </ul>
</div>
Cookie: <span id="display"></span>
</body>

然后，如果您在页面上运行以下脚本片段：

$(document).ready(function () {
    $('#cssmenu .menu-root li.active-base').removeClass('active-base').addClass('active').parents('.menu-root .has-sub').addClass('active');
});

那么您最终将删除额外的active-base类，并且每个.has-sub父级都将具有类active。正如您所看到的，我将.menu-root添加到了根列表中，所以如果您稍后决定将整个内容放入另一个不应按此逻辑扩展的列表中，它就不会再向上了。

此外，第1层项目（页面）不需要活动基础，因为它们不会使任何父li扩展。

相关文章：