单击关闭时保持 Bootstrap 下拉菜单打开

Posted

技术标签:

【中文标题】单击关闭时保持 Bootstrap 下拉菜单打开【英文标题】:Keep Bootstrap Dropdown Open When Clicked Off 【发布时间】:2013-11-13 10:37:05 【问题描述】:

如果下拉列表可见,并且我在下拉列表之外单击它会关闭。我需要它不要关闭。

来自文档:

插件打开时还会添加.dropdown-backdrop作为点击区域,用于在菜单外点击时关闭下拉菜单。

我可以添加什么 javascript 来防止下拉菜单关闭?

【问题讨论】:

【参考方案1】:

来自Bootstrap dropdown 文档的事件部分:

hide.bs.dropdown:当调用 hide 实例方法时立即触发此事件。

对于初学者来说,为了防止下拉菜单关闭,我们可以监听这个事件并通过返回 false 来阻止它继续进行:

$('#myDropdown').on('hide.bs.dropdown', function () 
    return false;
);

对于一个完整的解决方案,您可能希望在单击下拉菜单时允许它关闭。所以只有某些时候我们会想要阻止盒子关闭。

为此,我们将在下拉菜单引发的另外两个事件中设置.data() 标志:

shown.bs.dropdown - 显示时,我们会将 .data('closable') 设置为 false click - 点击时,我们会将.data('closable') 设置为true

因此,如果hide.bs.dropdown 事件由下拉列表中的click 引发,我们将允许关闭。

Live Demo in jsFiddle

JavaScript

$('.dropdown.keep-open').on(
    "shown.bs.dropdown": function()  this.closable = false; ,
    "click":             function()  this.closable = true; ,
    "hide.bs.dropdown":  function()  return this.closable; 
);

HTML (注意我已将 keep-open 类添加到下拉列表中)

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" class="btn btn-primary"
            data-toggle="dropdown" data-target="#" >
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <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>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

【讨论】:

找到了很多关于这个问题的答案,但这个是迄今为止最好的,并且为我节省了相当多的时间。非常感谢! +1 @VarunChaddha,你应该问另一个问题,并用 2.x 标记它并链接回这个,这样你就可以展示你到目前为止的工作。 谢谢你的回复@KyleMit。实际上,我可以使用以下代码解决此问题: $j('.cal-options-dropdown .dropdown-menu').on( "click":function(e) e.stopPropagation(); ) ; ...我不知道我是否应该打开新问题并用这个答案自己回答? 我尝试了你的 jsfiddle,但它似乎不起作用。我单击下拉列表中的任何选项并关闭它。我已经尝试过这个修复和 stopPropogation 修复,但似乎没有一个可以阻止下拉菜单关闭。有什么建议吗? 嘿,对不起,我不是故意冒犯的,我正在尝试找到类似的解决方案,但在反应。您的代码也不适用于 jquery,您可以在 Mike Kane 的答案中看到更正,这是有效的。【参考方案2】:

某些依赖项的版本更改导致 KyleMit 和大多数其他解决方案不再有效。我更深入地研究了一下,由于某种原因,当 Bootstrap 尝试并失败 hide.bs.dropdown 时发送了 click(),然后又调用了 hide.bs.dropdown。我通过强制关闭 click() 出现在按钮本身而不是整个下拉菜单上来解决这个问题。

Live Demo in Bootply

JavaScript

$('.keep-open').on(
    "shown.bs.dropdown": function()  $(this).attr('closable', false); ,
    //"click":             function()  , // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown
    "hide.bs.dropdown":  function()  return $(this).attr('closable') == 'true'; 
);

$('.keep-open').children().first().on(
  "click": function() 
    $(this).parent().attr('closable', true );
  
)

html

<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" data-toggle="dropdown" data-target="#" class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>
    
    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <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>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

【讨论】:

【参考方案3】:

$('.dropdown.keep-open').on(
    "shown.bs.dropdown": function()  this.closable = true; ,
    "click":             function(e)  
        var target = $(e.target);
        if(target.hasClass("btn-primary")) 
            this.closable = true;
        else 
           this.closable = false; 
    ,
    "hide.bs.dropdown":  function()  return this.closable; 
);
body 
    margin: 10px;
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#"
       data-toggle="dropdown" data-target="#" 
       class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>
    
    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" 
        aria-labelledby="dLabel">
        <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>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://***.com/q/19740121/1366033'>Keep dropdown menu open</a><br/>
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
    Bootstrap Documentation: <a href='http://getbootstrap.com/javascript/#dropdowns'>Dropdowns</a><br/>
<div>

【讨论】:

【参考方案4】:

我找到了一个不需要新js的解决方案。不要使用下拉菜单,而是使用引导折叠。我仍然使用一些下拉类将其设置为下拉样式。

<div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="collapse" data-target="#myList">Drop Down
    <span class="caret"></span></button>
    <div id="myList" class="dropdown-menu">
        <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
        <input type="checkbox" name="vehicle" value="Car"> I have a car<br></div>

【讨论】:

谢谢它真的帮了我很多! 这可行,但它在显示下拉菜单(引导程序 4)时略有延迟。 正是我需要的。顺便说一句,你错过了一个结束 【参考方案5】:

我设法结合使用 KyleMitt 的上述解决方案,但在 Footable 对象中使用它时遇到了问题(我相信这是由于表格的动态创建造成的)。我将 .keep-open 应用于顶层的 .dropdown .div。

$('#contact_table').on("click", '.keep-open', function () 
    this.closable = false;
);

$('#contact_table').on("shown.bs.dropdown", '.keep-open', function () 
    this.closable = true;
);
$('#contact_table').on("hide.bs.dropdown", '.keep-open', function () 
    let ret = this.closable;
    this.closable = true;
    return ret;
);

此代码的功能允许您在外部单击以关闭下拉菜单,但单击其中的项目将使其保持打开状态。如果您对此有任何建议/cmets,请告诉我,我会尝试编辑。

【讨论】:

【参考方案6】:

Mike Kane 的解决方案大部分时间都有效,但有一种情况是 hide.bs.dropdown 事件在 click() 事件之前触发,导致下拉菜单在应关闭时没有关闭。

我想出了另一种方法来检查事件中的clickEvent 对象。我最初的计划是向上 DOM 并检查 clickEvent 目标是否是下拉列表的子项,但发现如果您在下拉列表中单击 clickEvent 是未定义的,如果您单击它之外事件是一个对象。

所以这只是一个简单的检查clickEvent是否作为一个对象存在。

$('.dropdown.keep-open').on(
    "hide.bs.dropdown":  function(e) 
        return (typeof(e.clickEvent) != 'object');
    
);

【讨论】:

【参考方案7】:

其他解决方案。单击 .dropdown-menu 内部后保持下拉菜单打开:

$('.heading .options .dropdown').on(
    "shown.bs.dropdown":function()this.closable = true;,
    "click":            function(e)
        var target = $(e.target);
        var d = target.data();
        if(typeof d.toggle != 'undefined' && d.toggle == 'dropdown')
            this.closable = true;
        else 
            var p = target.parent();
            var dd = p.data();
            if(typeof dd.toggle != 'undefined' && dd.toggle == 'dropdown')
                this.closable = true;
            else 
                if(target.hasClass('dropdown-menu'))
                    this.closable = false;
                else 
                    var pp = target.parent('.dropdown-menu');
                    if(typeof pp != 'undefined')
                        this.closable = false;
                    else
                        this.closable = true;
                
            
        
    ,
    "hide.bs.dropdown": function()return this.closable;
);

【讨论】:

【参考方案8】:

在 .dropdown-menu 内部单击后保持下拉菜单打开

  $(document.body).on(
    "shown.bs.dropdown": function() this.closable = true; ,
    "hide.bs.dropdown": function() return this.closable; ,
    "click": function(e) this.closable = !$(e.target).closest(".dropdown-menu").length; ,
  ,".dropdown.keepopen");

【讨论】:

【参考方案9】:
$('.dropdown.keep-open').on(
    "shown.bs.dropdown": function() 
        this.closable = true; 
    ,
    "hide.bs.dropdown": function(e) 
        if(!this.closable)
            this.closable = true;
            return false;
        
        return this.closable; 
    ,
    "click": function(e) 
        this.closable = false;
    
);

【讨论】:

以上是关于单击关闭时保持 Bootstrap 下拉菜单打开的主要内容,如果未能解决你的问题,请参考以下文章

当用户在菜单外单击时,如何关闭 Bootstrap 导航栏下拉菜单?

我想在 React 中做一个下拉菜单。单击一个按钮应打开一个子菜单。在子菜单之外单击应将其关闭

下拉菜单打不开

Twitter bootstrap 在下拉菜单打开时停止传播

点击时保持 Bootstrap 下拉菜单打开

mouseenter 上的 angular-bootstrap 下拉菜单,并在单击之前保持下拉菜单隐藏。