悬停时禁用引导子菜单

Posted

技术标签:

【中文标题】悬停时禁用引导子菜单【英文标题】:Disable boostrap submenu on hover 【发布时间】:2018-05-06 14:00:16 【问题描述】:

我有一个使用 Boostrap 3 的导航菜单,但我不知道如何禁用子菜单的“悬停”功能。我希望子菜单只在点击时打开。

https://jsfiddle.net/elalgarro/q1vddxhx/

类似:

$(".dropdown-submenu").hover(function() dontOpen() )
$(".dropdown-submenu").click(function() openIt() )

但我无法让它在悬停时不打开。

编辑:

Zakaria Acharki 的功劳就像是一种魅力 :)

在我的实际应用程序中,.dropdown-submenu:hover 隐藏在引导 css 文件中的某个位置。所以我将我的 css 文件更改为

.dropdown-submenu:hover>.dropdown-menu 
      display:none;

然后这个 jQuery :

$('.dropdown-submenu').on('click', function(e)
    e.stopPropagation();

    $(this).find('.dropdown-menu:eq(0)').toggle();
)

注意现在子菜单没有关闭,当你点击离开时需要添加更多代码来关闭子菜单。

【问题讨论】:

【参考方案1】:

Working Fiddle.

首先,您必须从 CSS 代码中删除这部分:

.dropdown-submenu:hover>.dropdown-menu 
    display:block;

然后使用 jQuery 编写执行相同操作的代码:

 $('.dropdown-submenu').on('click', function(e)
    e.stopPropagation();

    $(this).find('.dropdown-menu:eq(0)').toggle();
)

编辑:要在点击离开时关闭菜单,只需将点击事件附加到整个html

$('html').click(function() 
   $('.dropdown-submenu ul').hide();
);

希望这会有所帮助。

$('.dropdown-submenu').on('click', function(e) 
  e.stopPropagation();

  $(this).find('.dropdown-menu:eq(0)').toggle();
)

$('html').click(function() 
  $('.dropdown-submenu ul').hide();
);
#parentMenu 
  display: block;
  top: 0;



/* Helps position submenu */

.dropdown-submenu 
  position: relative;



/* Menus under the submenu should show up on the right of the parent */

.dropdown-submenu>.dropdown-menu 
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;



/* Add carot to submenu links */

.dropdown-submenu>a:after 
  display: block;
  float: right;
  /*simple */
  content: "►";
  color: #cccccc;
  /* looks a little better */
  content: " ";
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;



/* Change carot color on hover */

.dropdown-submenu:hover>a:after 
  border-left-color: #ffffff;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" />
<ul class="dropdown-menu" id="parentMenu" role="menu" aria-labelledby="dropdownMenu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>

  <!-- Child Menu -->
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level</a></li>

      <!-- Grandchild Menu -->
      <li class="dropdown-submenu">
        <a href="#">More..</a>
        <ul class="dropdown-menu">
          <li><a href="#">3rd level</a></li>
          <li><a href="#">3rd level</a></li>
        </ul>
      </li>

      <li><a href="#">Second level</a></li>
      <li><a href="#">Second level</a></li>
    </ul>
  </li>
</ul>

</li>
</ul>

【讨论】:

以上是关于悬停时禁用引导子菜单的主要内容,如果未能解决你的问题,请参考以下文章

将鼠标悬停在一个带有子菜单的引导子菜单项上会重新排列父列表项

单击后关闭悬停子菜单而不刷新页面

在导航引导解释中隐藏子菜单

悬停时的Jquery动画子菜单不流畅

鼠标悬停时打开角度材质菜单

ASP 动态菜单 子菜单 鼠标悬停在子菜单上时消失。