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

Question

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

• 菜单结构基于有序列表。列表项包含包含子菜单选项的嵌套项(UL)。
• 加载页面时，所有子菜单都必须显示为折叠。这是很容易做到的，有显示:无子菜单样式规则。但是，即使禁用了Java脚本，这个网站也应该运行。因此，我想我应该使用子菜单规则样式来显示:在$(document).ready(function ())期间，阻止并将显示更改为'none‘。因此，如果禁用JavaScript，菜单将出现，所有子菜单项都已展开。

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

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

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

谢谢

Answer 1

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

Answer 2

也许您可以有两个版本的菜单，也可以使用noscript标记并将非javascript菜单版本放在其中。

或者另一个选项是，您可以在菜单后面添加一个脚本标记

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

没有$(文档).ready