Jquery垂直菜单折叠与导航答案

【问题标题】：Jquery vertical menu collapses with NavigationJquery垂直菜单折叠与导航
【发布时间】：2014-02-20 23:01:19
【问题描述】：

我正在使用来自 - http://cssmenumaker.com/builder/1501457 的菜单。这就像 Jquery Accordion 一样工作，一次只打开一个面板。当主菜单展开并单击子菜单时，它会导航到该页面，但主菜单会随着页面刷新而折叠。我怎样才能让它保持不变。

在 Asp.Net 母版页中使用它。

css和jquery在链接里

【问题讨论】：

标签： jquery html asp.net css

【解决方案1】：

本页提供的菜单使用javascript动态更新菜单状态。

这意味着您的 html 页面是有状态的，并且出现问题是因为您需要正确处理客户端和服务器代码之间的状态传输。

然后您有三个替代解决方案：

将您的客户端应用程序状态（当前菜单）传输到您的 asp 后端并根据此状态重新生成新页面
将您的应用程序状态传输到您的 asp 后端并将其发送回客户端浏览器，并确保客户端重新应用此状态（使用 javascript）
仅向您的 asp 后端请求新数据并在客户端 javascript 中呈现新页面内容

这个问题也可能是您没有使用正确的工具来构建菜单的症状。您确实在混合服务器端和客户端渲染，并且从您的问题中感觉，使用完整的服务器端渲染可能会更好。

【讨论】：

能否请您进一步指导第一个选项的示例
这个菜单对象大部分是由客户端javascript呈现的。这有效地使解决方案 1) 难以实施和维护。我建议选择替代方案 2）并将菜单状态从浏览器到服务器，然后作为插入 html 页面中的 javascript 对象返回到新页面中的浏览器。这将使您能够在客户端重新应用所需的状态。例如，您可以使用 jQuery 根据服务器提供的状态来模拟对所需菜单的单击。

【解决方案2】：

在当前菜单的 li 中添加 active 类，并添加 style="display: block;"到要显示为打开的子 ul 元素。

<ul>
   <li><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub active'><a href='#'><span>Products</span></a>
      <ul style="display: block;">
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>

【讨论】：

为“产品”启用并显示：块。它现在仅适用于产品菜单。公司菜单像以前一样折叠。所以我也为此做了显示块。现在，两个主菜单在页面加载时都显示为展开状态，而且，作为它激活的产品，即使在显示其他页面时它也总是展开
嗯，我想我还不够清楚。我建议将其作为显示当前打开的子菜单的一种方式，因为您正在重新加载页面。这意味着您每次重新加载页面和样式块到它的子 ul 时，都以某种方式（服务器端或客户端）将这些活动类添加到正确的 li 中。所以你必须想办法在每次页面重新加载时添加这些。

【解决方案3】：

你不应该使用手风琴。因为手风琴只会同时打开一个标签。尝试使用 slideDwon Jquery

【讨论】：