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();
    });
});

显示/隐藏wordpress子菜单

1 个答案: