jQuery mmenu v7.0.0 打开菜单打开子菜单
jQuery mmenu v7.0.0 open submenu on menu open
我对 jQuery mmenu 的新版本有疑问。我见过适用于旧版本 mmenu 的解决方案,但不适用于此版本,而且我在文档中也找不到任何内容。
我有一个普通菜单(设备宽度大于 1024px):
<nav id="menu">
<ul class="nav-firstlvl">
<li>
<a href="/documentation/" title="Documentation">Documentation</a>
</li>
<li class="act">
<a href="/module/" title="Module">Module</a>
<ul class="nav-secondlvl">
<li class="act">
<a href="/module/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</li>
<li>
<a href="/organisation/" title="Organisation">Organisation</a>
<ul class="nav-secondlvl">
<li>
<a href="/organisation/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</li>
<li>
<a href="/contact/" title="Contact">Contact</a>
</li>
</ul>
</nav>
被 mmenu 克隆:
var $menu = jQuery("#menu").mmenu({
"extensions": [
"position-right"
]
}, {
clone:true
}
);
一切正常。我的问题是,如果用户在子菜单的页面上(我的示例的页面 "Subpage" 中的任一页面),我想在子菜单中打开菜单。我尝试将 class "mm-opened" 添加到活动子菜单列表项的列表项中,但没有任何反应。菜单在第一层打开。然后我意识到与旧的 mmenu-version 相比,新版本有不同的 classes 和克隆菜单的不同结构:
<nav id="mm-menu" class="mm-menu mm-menu_offcanvas mm-menu_position-right" aria-hidden="true">
<div class="mm-panels">
<div id="mm-0" class="mm-panel mm-panel_has-navbar mm-panel_opened">
<div class="mm-navbar">
<a class="mm-navbar__title">Menu</a>
</div>
<ul class="nav-firstlvl mm-listview">
<li class="mm-listitem">
<a href="/documentation/" title="Documentation">Documentation</a>
</li>
<li class="act mm-listitem">
<a class="mm-btn_next" href="#mm-1">
<span class="mm-sronly">Open submenu (Module)</span>
</a>
<a href="/module/" title="Module">Module</a>
</li>
<li class="mm-listitem">
<a class="mm-btn_next" href="#mm-2">
<span class="mm-sronly">Open submenu (Organisation)</span>
</a>
<a href="/organisation/" title="Organisation">Organisation</a>
</li>
<li class="mm-listitem">
<a href="/contact/" title="Contact">Contact</a>
</li>
</ul>
</div>
<div id="mm-1" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
<div class="mm-navbar">
<a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
<span class="mm-sronly">Close submenu</span>
</a>
<a class="mm-navbar__title" href="#mm-0">Module</a>
</div>
<ul class="nav-secondlvl mm-listview">
<li class="act mm-listitem">
<a href="/module/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</div>
<div id="mm-2" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
<div class="mm-navbar">
<a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
<span class="mm-sronly">Close submenu</span>
</a>
<a class="mm-navbar__title" href="#mm-0">Organisation</a>
</div>
<ul class="nav-secondlvl mm-listview">
<li class="mm-listitem">
<a href="/organisation/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</div>
</div>
</nav>
当然我可以通过 jQuery 添加和删除几个 classes 但我想知道是否有更简单的方法可以像之前的版本那样做将一个 class 添加到列表元素并且有效?我无法想象他们会从如此简单的事情变成相当复杂的事情......
对于我显然找不到的文档部分的任何帮助、指示甚至 link 都将不胜感激。谢谢
编辑
我刚刚意识到 mmenu 导航在克隆时不会从普通子菜单中克隆列表项上的 act-class。也许这就是这里的问题...或者这甚至可能是一个错误?
好的...我在配置中忘记了一些东西(我在documentation tutorial...中找到的)
我必须更改 mmenu 的初始化配置:
var $menu = jQuery("#menu").mmenu({
"extensions": [
"position-right"
]
}, {
clone:true,
classNames: { // This part was missing...
selected: "act"
}
}
);
我对 jQuery mmenu 的新版本有疑问。我见过适用于旧版本 mmenu 的解决方案,但不适用于此版本,而且我在文档中也找不到任何内容。
我有一个普通菜单(设备宽度大于 1024px):
<nav id="menu">
<ul class="nav-firstlvl">
<li>
<a href="/documentation/" title="Documentation">Documentation</a>
</li>
<li class="act">
<a href="/module/" title="Module">Module</a>
<ul class="nav-secondlvl">
<li class="act">
<a href="/module/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</li>
<li>
<a href="/organisation/" title="Organisation">Organisation</a>
<ul class="nav-secondlvl">
<li>
<a href="/organisation/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</li>
<li>
<a href="/contact/" title="Contact">Contact</a>
</li>
</ul>
</nav>
被 mmenu 克隆:
var $menu = jQuery("#menu").mmenu({
"extensions": [
"position-right"
]
}, {
clone:true
}
);
一切正常。我的问题是,如果用户在子菜单的页面上(我的示例的页面 "Subpage" 中的任一页面),我想在子菜单中打开菜单。我尝试将 class "mm-opened" 添加到活动子菜单列表项的列表项中,但没有任何反应。菜单在第一层打开。然后我意识到与旧的 mmenu-version 相比,新版本有不同的 classes 和克隆菜单的不同结构:
<nav id="mm-menu" class="mm-menu mm-menu_offcanvas mm-menu_position-right" aria-hidden="true">
<div class="mm-panels">
<div id="mm-0" class="mm-panel mm-panel_has-navbar mm-panel_opened">
<div class="mm-navbar">
<a class="mm-navbar__title">Menu</a>
</div>
<ul class="nav-firstlvl mm-listview">
<li class="mm-listitem">
<a href="/documentation/" title="Documentation">Documentation</a>
</li>
<li class="act mm-listitem">
<a class="mm-btn_next" href="#mm-1">
<span class="mm-sronly">Open submenu (Module)</span>
</a>
<a href="/module/" title="Module">Module</a>
</li>
<li class="mm-listitem">
<a class="mm-btn_next" href="#mm-2">
<span class="mm-sronly">Open submenu (Organisation)</span>
</a>
<a href="/organisation/" title="Organisation">Organisation</a>
</li>
<li class="mm-listitem">
<a href="/contact/" title="Contact">Contact</a>
</li>
</ul>
</div>
<div id="mm-1" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
<div class="mm-navbar">
<a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
<span class="mm-sronly">Close submenu</span>
</a>
<a class="mm-navbar__title" href="#mm-0">Module</a>
</div>
<ul class="nav-secondlvl mm-listview">
<li class="act mm-listitem">
<a href="/module/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</div>
<div id="mm-2" class="mm-panel mm-hidden mm-panel_has-navbar" aria-hidden="true">
<div class="mm-navbar">
<a class="mm-btn mm-btn_prev mm-navbar__btn" href="#mm-0" aria-owns="mm-0" aria-haspopup="true">
<span class="mm-sronly">Close submenu</span>
</a>
<a class="mm-navbar__title" href="#mm-0">Organisation</a>
</div>
<ul class="nav-secondlvl mm-listview">
<li class="mm-listitem">
<a href="/organisation/subpage/" title="Subpage">Subpage</a>
</li>
</ul>
</div>
</div>
</nav>
当然我可以通过 jQuery 添加和删除几个 classes 但我想知道是否有更简单的方法可以像之前的版本那样做将一个 class 添加到列表元素并且有效?我无法想象他们会从如此简单的事情变成相当复杂的事情......
对于我显然找不到的文档部分的任何帮助、指示甚至 link 都将不胜感激。谢谢
编辑
我刚刚意识到 mmenu 导航在克隆时不会从普通子菜单中克隆列表项上的 act-class。也许这就是这里的问题...或者这甚至可能是一个错误?
好的...我在配置中忘记了一些东西(我在documentation tutorial...中找到的)
我必须更改 mmenu 的初始化配置:
var $menu = jQuery("#menu").mmenu({
"extensions": [
"position-right"
]
}, {
clone:true,
classNames: { // This part was missing...
selected: "act"
}
}
);