mmenu 菜单系统在 .Net 表单标签中不起作用
Posted
技术标签:
【中文标题】mmenu 菜单系统在 .Net 表单标签中不起作用【英文标题】：mmenu menu system not working within .Net form tag 【发布时间】：2013-10-23 07:52:50 【问题描述】：我目前正在寻求在我们的 Asp.Net 站点中实施移动菜单系统 mmenu (http://mmenu.frebsite.nl/)。
在 html 页面和母版页上效果很好，只要它在表单标签之外。当我将它放在表单标签中时，它不再起作用。
这里是菜单的 HTML：
<nav id="menu">
<ul>
<li><a href="page.html">The page</a></li>
<li><a href="mainmenu.html">The mainmenu</a></li>
<li><a href="submenus.html">Submenus</a></li>
<li><a href="labels.html">Labels</a></li>
<li><a href="counters.html">Counters</a></li
<li><a href="selected.html">Selected item</a></li>
<li><a href="openmenu.html">Open the menu</a></li>
<li><a href="closemenu.html">Close the menu</a></li>
</ul>
</nav>
运行良好：
<script type="text/javascript">
$(function ()
$('nav#menu').mmenu(
zposition: "next",
position: "top"
);
);
</script>
但是，如果我将它放在表单标签中（form id="MainForm" runat="server"），我会收到 jquery 错误。需要在其中，因为某些菜单项将来自数据库。
干杯 西蒙
【问题讨论】：
错误是什么？您是否考虑到 asp.net 更改元素ids 时标记为 runat="server" 的事实？
【参考方案1】：
Mmenu 在初始化时做了两件事。首先，它用<div class="mmenu-page"> 容器包装<body> 的innerHTML，然后将菜单中的<nav> 剪掉，并将它们在<body> 和DOM 中的新页面容器之间移动。
无论出于何种原因，它都会将 ASP.Net 包装 <form> 标记视为 <body> 标记，但前提是它作为 <body> 的第一个子项出现。在这种情况下，它会在结束 <form> 标记之后立即插入它的包装 <div>。
如果你用一个空的<div> 包装你的 ASP.Net <form> 标记，mmenu 将能够正确地定位它的<div class="mmenu-page"> 并且一切都会神奇地工作。
您会希望您的代码 aspx 页面如下所示：
<body>
<div>
<form id="form1" runat="server">
...
<nav> ...mobile menu... </nav>
</form>
</div>
<body>
【讨论】：
【参考方案2】：空的 div 包装体对我不起作用。我在 GitHub 上发现了一篇效果很好的帖子：
$('#search-copy').mmenu(
// options
,
// config
offCanvas:
menuWrapperSelector: "#aspnetForm",
pageNodetype: "form",
pageSelector: "body > form"
);
这是原帖：
https://github.com/FrDH/jQuery.mmenu/issues/426
您可能需要使用您的选择器。我最终使用了 pageSelector 的 ID 和 menuWrapperSelector 的通用选择器。
使用mmenu，我发现有很多隐藏的配置和选项设置。有些在 mmenu 文档中，有些在 OffCanvas 文档中。似乎配置/选项设置几乎可以满足您的任何需求，而无需编写大量自定义 CSS。
【讨论】：
以上是关于mmenu 菜单系统在 .Net 表单标签中不起作用的主要内容，如果未能解决你的问题，请参考以下文章