Show / Hide Wordpress Submenu
I am having a hard time changing the behavior of my Wordpress menu. I'm looking for it to show on click, not hover:
<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
});
});
When I change it to switch it kills other links in the menu. I'm not sure what the problem is here ...
+3
source to share
1 answer
You can just use jQuery's click function, not hover. Also you need to make sure the tag is <a>
not working by disabling the default hyperlink behavior.
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();
});
});
+3
source to share