Javascript 单击子菜单列表项时，如何保持子菜单展开？用饼干？_Javascript_Jquery_Cookies_Drop Down Menu_Menu

Javascript 单击子菜单列表项时，如何保持子菜单展开？用饼干？

javascript jquery cookies drop-down-menu menu

Javascript 单击子菜单列表项时，如何保持子菜单展开？用饼干？,javascript,jquery,cookies,drop-down-menu,menu,Javascript,Jquery,Cookies,Drop Down Menu,Menu,我有一个使用jquery的扩展菜单。它工作得很好，除了一件事：当用户导航离开页面时，菜单会折叠。我希望当用户单击任何最后的链接时，菜单保持打开状态。所有这些链接都打开同一页。这些页面上的内容来自数据库http://jsfiddle.net/lekien992/6kkd5fcx/5/ <body> <div id='cssmenu'> <ul> <li><a href='#'><span>Home</span&g

我有一个使用jquery的扩展菜单。它工作得很好，除了一件事：当用户导航离开页面时，菜单会折叠。我希望当用户单击任何最后的

链接时，菜单保持打开状态。所有这些链接都打开同一页。这些页面上的内容来自数据库

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

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

首先检查要从哪个项目打开

在客户端上向上展开父列表元素

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

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

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

<?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>

。。。然后，您将删除额外的

活动基类

，并且每个

.has sub

父类将使该类

处于活动状态

。如您所见，我在根列表中添加了

.menu root

，因此，如果您稍后决定将整个内容放入不应按此逻辑展开的另一个列表中，它将不会进一步上升

此外，第1层项目（页面）不需要活动库，因为它们不会使任何父项

li

扩展。

您可以使用localStorage进行扩展。首先感谢您的回答，但我不知道服务器，因为我的作业网站basic需要它，我还想下次使用它，不需要太多更改。，我知道它使用cookies，但我们刚刚在两周内研究了这个问题，所以需要帮助来完成网站上唯一剩下的问题。也许你也不用饼干？今天我搜索了一整天谷歌，我了解了一些关于cookies的事情，但是应用到上面的例子中，我做不到。它应该添加JQuery

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