Question

我使用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>

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

Answer 1

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

我假设您使用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>

然后，如果您在页面上运行此脚本代码段：

$(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扩展。

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

1 个答案: