顯示/隱藏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();
    });
});