javascript - 显示/隐藏 wordpress 子菜单

Question

我在更改 Wordpress 菜单的行为时遇到了一些困难。我正在寻找它在单击时而不是在悬停时显示:

<nav>
    <ul>
        <li>
            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
        <li>
            <br />
        <form method="get" id="search_form" action="<?php bloginfo('home'); ?>">
            <input type="text" class="text searchForm" name="s" value="Search" >
        </form>
    </ul>
</nav>

jQuery(document).ready(function ($) {
    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    $("li.menu-item").click(function () { // mouse CLICK instead of hover
        $(".sub-menu").hide(); // First hide any open menu items
        $(this).find(".sub-menu").show(); // display child
    });
});

当我将其更改为切换时，它会关闭菜单中的其他链接。我不确定这里的问题是什么......

Answer 1

您可以只使用 jQuery 点击功能，而不是悬停。此外，您还必须确保 <a>通过禁用超链接的默认行为，标记不起作用。

jQuery(document).ready(function ($) {
    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    $("li.menu-item").click(function () { // mouse CLICK instead of hover
        // Only prevent the click on the topmost buttons
        if ($('.sub-menu', this).length >=1) {
            event.preventDefault();
        }
        $(".sub-menu").hide(); // First hide any open menu items
        $(this).find(".sub-menu").show(); // display child
        event.stopPropagation();
    });
});