在点击内部时保持Bootstrap下拉菜单打开。

21 浏览
0 Comments

在点击内部时保持Bootstrap下拉菜单打开。

我有一个Bootstrap下拉菜单。我希望在我点击菜单内部时保持打开状态，但在单击下拉菜单切换按钮或菜单外部时关闭。

在我在中输入内容时，下拉菜单似乎不会关闭，但是当我在下拉菜单内部的其他地方单击时，它会关闭。

问题：如何使用jQuery避免这种情况？

以下是我的HTML代码：

在Bootply中的演示

0

2 答案

0 Comments

原因：点击其他链接后，再次点击菜单，子下拉菜单不再显示。

解决方法：使用以下JavaScript代码手动打开和关闭下拉菜单。

$(function() {
  $('.dropdown-toggle').on('click', function(event) {
    $('.dropdown-menu').slideToggle();
    event.stopPropagation();
  });
  $('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
  });
  $(window).on('click', function() {
    $('.dropdown-menu').slideUp();
  });
});

将上述代码放入`application.js`文件中，使其在所有页面上生效。

0
0 Comments

问题：如何保持Bootstrap下拉菜单在内部点击时保持打开状态？

解决方法：可以通过在下拉菜单内部停止事件传播来解决这个问题。具体代码如下：

$(document).on('click', '.allow-focus .dropdown-menu', function (e) {
  e.stopPropagation();
});

在上述代码中，通过使用`stopPropagation()`方法停止事件的传播。

下面是一个使用该解决方法的示例Demo：






  
  

    

      What's Your Name?

另外，如果需要解决相反的问题（即点击外部区域时保持下拉菜单打开状态），可以参考以下链接的解决方法：Keep Bootstrap Dropdown Open When Clicked Off。

0