单击菜单项本身以外的任何其他位置时，防止自举下拉关闭 [英] Prevent bootstrap dropdown closing when clicked anywhere else other than the menu item itself

问题描述

我需要在子项处于活动状态时打开子菜单（如用户在该页面上时）。由此管理：

I need the submenu to be opened when its child is active (as in when the user is on that page). Managed to do so already by this:

// To open active submenu on load
jQuery('.keep-open').find('.current-menu-item').closest('.current-menu-parent').children('.dropdown-toggle').trigger('click');

但点击任意位置后菜单会关闭。除非特别点击，否则它需要保持打开状态。只有在外面点击时才设法阻止它关闭：

But upon clicking anywhere, the menu closes. It needs to stay opened unless it's specifically clicked. Only managed to prevent it from closing when clicked outside using this:

// To prevent submenu from being closed on outside click
jQuery('.current-menu-parent').on('hide.bs.dropdown', function() {
  return false;
});

但是，当然，这似乎也阻止它在点击菜单本身时也会关闭。如何指定它仅在单击该菜单项时关闭？

But of course, this seems prevents it from closing too even when the menu itself is clicked. How can I specify it to close only when that menu item is clicked?

我找到的最近参考但是 this 和这个但到目前为止仍然无法掌握如何做到这一点。这是在WordPress网站菜单上通过 wp_bootstrap_navwalker 。

Closest reference I found but was this and this but so far still can't get a hold of how to do it. This is on a WordPress site menu via wp_bootstrap_navwalker.

Jsfiddle在这里

Jsfiddle here

推荐答案

如果您只想在点击该菜单时关闭，只需添加此代码

If you want to close only when that menu is clicked just add this code

// Hide dropdown when click menu
jQuery('.current-menu-parent').bind('click', function() {
        $(this).find('ul').fadeOut();
});

在这里演示

或者你想在点击该菜单时再次显示菜单项：

Or you want to show menu item again when that menu is clicked:

// toggle dropdown when click menu
jQuery('.current-menu-parent').bind('click', function() {
        $(this).find('ul').fadeToggle();
});

在这里演示

这篇关于单击菜单项本身以外的任何其他位置时，防止自举下拉关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！