1

我正在尝试使用 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。

谢谢。

4

3 回答 3

3

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

<ul>
    <li><span>Guides</span>
        <ul>
            <li><a href="/">Beer Guide 2013</a></li>
        </ul>
    </li>
</ul>
于 2013-08-28T19:53:27.760 回答
0 
$('li').hover(function(){

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

},function(){

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

});

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

$('#li').toggle(function() {
  $('ul',this).slideDown();
}, function() {
  $('ul',this).slideUp();
});
于 2013-08-27T18:32:18.217 回答
0

我们今天遇到了完全相同的情况，经过大量研究后使用了以下解决方案（适应您的情况）。似乎他们已经改变了一些事情，所以元素上的数据属性没有得到明确的支持，所以我们将初始化移到了 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 事件处理程序打开子菜单项。

于 2014-07-22T22:20:50.887 回答