在 ASP .NET 中使用 jQuery 和母版页更改菜单样式答案

【问题标题】：Changing menu styles using jQuery and master pages in ASP .NET在 ASP .NET 中使用 jQuery 和母版页更改菜单样式
【发布时间】：2012-07-08 16:23:26
【问题描述】：

我使用 jQuery 在 ASP.NET 母版页上创建了一个垂直菜单。以下是一些需要考虑的事项：

菜单结构基于有序列表。列表项具有包含子菜单选项的嵌套项 (UL)。
加载页面时，所有子菜单必须显示为折叠状态。这很容易通过 display: none 子菜单样式规则来完成。但是，即使禁用 Java 脚本，该网站也应该运行。所以我想我会设置子菜单规则样式来显示：在 $(document).ready(function ()) 期间阻止并将显示更改回“无”。因此，如果 JavaScript 被禁用，菜单将显示所有已展开的子菜单项。

问题：当前启用 JavaScript 时，页面加载时所有子菜单选项都展开，然后在运行 jQuery 就绪方法后，子菜单会折叠使用：

$('.menu li > .sub-menu').hide();

我想显示所有子菜单项已经折叠的页面，并避免在页面加载后子菜单项折叠。我怎样才能做到这一点？

谢谢

【问题讨论】：

我认为.hide() 默认为对象设置动画，直到它们被隐藏 - 认为它是半秒左右。这可能就是你所看到的。尝试改用.hide(0)。
刚刚查看了 .hide 函数 - 它似乎在最近的版本中发生了变化，现在默认为立即隐藏。我发誓它默认使用动画。

标签： jquery asp.net css master-pages

【解决方案1】：

我想，我刚刚找到了答案。您想要的是将这些子菜单的 CSS 设置为 display: none;，然后在 noscript 标记中创建一个重复的子菜单。如果启用了JS，则noscript版本不显示，其他的也不显示CSS。如果 JS 被禁用，CSS 会作用于 JS 版本，但 noscript 标签会生效。

【讨论】：

谢谢 ClarkeyBoy - 我会试一试的。

【解决方案2】：

也许你可以有 2 个版本的菜单，也许你可以使用 noscript 标记并将你的非 JavaScript 菜单版本放在那里

或者另一种选择是也许你可以在菜单之后添加一个脚本标签

$('.menu li > .sub-menu').hide();

没有 $(document).ready

【讨论】：

感谢您的回复。不幸的是，在菜单后添加脚本标签不起作用。