Question

我有一个基本的垂直菜单，包含6个按钮。

当有人点击不是子菜单的按钮时，它会转到该页面。太好了！

如果单击的按钮有子菜单，则子菜单向下滑动，不再发生任何其他情况。当有人点击子菜单中的链接时，它会转到该链接。

问题是当您单击子菜单中的链接时，它只是向上滑动而不执行任何操作。我失去了理智。

HTML

<ul id="menu-primary" class="menu">
    <li id="menu-item-242" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
        <a>Button 1</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="">Button 1.1</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="">Button 1.2</a></li>
        </ul>
    </li>
    <li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-244"><a>Button 2</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="">Button 2.1</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-235"><a href="">Button 2.2</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234"><a href="">Button 2.3</a></li>
        </ul>
    </li>
    <li id="menu-item-484" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item"><a href="">Button 3</a></li>
    <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a href="">Button 4</a></li>
    <li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="">Button 5</a></li>
    <li id="menu-item-230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-230"><a href="">Button 6</a></li>
</ul>

JQUERY

$(document).ready( function() {

    $(".menu-item-has-children").click( function(event) {
    event.preventDefault();
    $(this).find('> .sub-menu').addClass('sub-menu-down').slideToggle();
    });

});

我也希望这样做，以便如果按钮2菜单打开并且有人点击按钮1，则按钮2菜单在按钮1菜单滑开时或之前滑动关闭。（如果有人有任何想法，那就是我正在前进的地方。）

Mega道具并提前致谢。

Answer 1

使用

$(".menu-item-has-children").click( function(event) {
    event.preventDefault();

    //Hide other menus
    //Find .sub-menu belonging to other menu-item-has-children
    //thus used .not() and 
    $(".menu-item-has-children").not(this).find('> .sub-menu').slideUp()

    //Slide this
    $(this).find('> .sub-menu').addClass('sub-menu-down').slideToggle();
});

参考$.fn.not()

从匹配元素集中删除元素。

Wordpress子菜单无法正常触发

1 个答案: