Question

我正在尝试使用mmenu jquery插件从父链接打开一个子菜单，几乎搞定了，但是一旦打开子菜单，该功能也会关闭菜单（主菜单从左边打开）。

我明白了：

<nav data-role="navbar" data-iconpos="left" id="leftMenu">
    <ul>
        <li><a id="a_home" href="/" >Home</a></li>
        <li><a id="a_what" href="/" >What to do</a></li>
        <li>
            <a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
            <ul id="guidesSubmenu">
                <li><a href="/">Beer Guide 2013</a></li>
                <li><a href="/">Bar Guide 2013</a></li>
                <li><a href="/">Cheap Eats 2013</a></li>
            </ul>
        </li>
        <li>
            <a id="a_sections"  href="#" >Sections</a>
        </li>
    </ul>
</nav>

因此，当我点击“指南”链接时，打开子菜单，同时关闭主菜单，向右动画。有谁知道打开子菜单的正确方法是什么？

这是插件页面：http://mmenu.frebsite.nl/ 不是一个简单的jquery javascript。

感谢。

Answer 1

jquery.mmenu插件自动将“open-submenu”按钮附加到其中包含UL的每个LI。如果A没有链接到一个实际页面，你需要做的就是用SPAN替换它：

<ul>
    <li><span>Guides</span>
        <ul>
            <li><a href="/">Beer Guide 2013</a></li>
        </ul>
    </li>
</ul>

Answer 2

$('li').hover(function(){

   $('ul',this).slideDown();

},function(){

    $('ul',this).slideUp();

});

只需使用您自己的li标签类名更改选择器。我认为您也可以切换方法。

$('#li').toggle(function() {
  $('ul',this).slideDown();
}, function() {
  $('ul',this).slideUp();
});

Answer 3

我们今天遇到了这个完全相同的情况，经过大量研究后使用了以下解决方案（适应您的情况）。看起来他们已经改变了一些东西，因此没有明确支持元素的数据属性，所以我们将初始化移到了JavaScript。

HTML（没有改变）：

<nav data-role="navbar" data-iconpos="left" id="leftMenu">
    <ul>
        <li><a id="a_home" href="/" >Home</a></li>
        <li><a id="a_what" href="/" >What to do</a></li>
        <li>
            <a id="a_guides" href="#guidesSubmenu" onclick="$('#leftMenu ul#guidesSubmenu').trigger( 'open.mm' );" >Guides</a>
            <ul id="guidesSubmenu">
                <li><a href="/">Beer Guide 2013</a></li>
                <li><a href="/">Bar Guide 2013</a></li>
                <li><a href="/">Cheap Eats 2013</a></li>
            </ul>
        </li>
        <li>
            <a id="a_sections"  href="#" >Sections</a>
        </li>
    </ul>
</nav>

JavaScript的：

<script type="text/javascript">
$(document).ready(function() {
    $("#leftMenu").mmenu({
        onClick: {
            close: false
        }
    });
});
</script>

将关闭选项指定为false会使其在单击li时不关闭mmenu，并允许onclick事件处理程序打开子菜单项。

Jquery Mmenu：打开一个子菜单

3 个答案: