Live Demo in jsFiddle

Question

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

来自文档：

当打开时，插件还会添加 .dropdown-backdrop 作为单击区域，以便在菜单外单击时关闭下拉菜单。

我可以添加哪些JavaScript来阻止关闭下拉？

Answer 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>

Answer 2

某些依赖项中的版本更改导致KyleMit，并且大多数其他解决方案不再起作用。我进一步挖掘了一些因为某些原因，当Bootstrap尝试并@Override public View getView(final int position, View convertView, ViewGroup parent) { LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); final ViewHolder viewHolder; if (convertView == null) { viewHolder = new ViewHolder(); convertView = inflater.inflate(R.layout.deallisting_card_view, null); viewHolder.m_Header = (TextView) convertView.findViewById(R.id.headingText); viewHolder.m_Subheader = (TextView) convertView.findViewById(R.id.subHeaderText); viewHolder.m_DummyText = (TextView) convertView.findViewById(R.id.subHeadingText); viewHolder.m_logoImage = (ImageView) convertView.findViewById(R.id.appImage); viewHolder.m_getBtn = (Button) convertView.findViewById(R.id.getDealBtn); convertView.setTag(viewHolder); } else { viewHolder = (ViewHolder) convertView.getTag(); } }失败时发送click()，然后再调用hide.bs.dropdown。我通过强制关闭hide.bs.dropdown在按钮本身而不是整个下拉菜单上解决了这个问题。

Live Demo in Bootply

的JavaScript

click()

HTML

$('.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 );
  }
})

Answer 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://stackoverflow.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>

Answer 4

我找到了一个不需要新js的解决方案。不要使用下拉菜单而是使用bootstrap崩溃。我仍然使用一些下拉类来设置它，就像下拉列表一样。

Decimal('5.55')

Answer 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;
});

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

Answer 6

其他解决方案。点击内部.downdown-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;}
});

Answer 7

点击内部.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");

Answer 8

迈克·凯恩（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');
    }
});

Answer 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 Dropdown打开

9 个答案:

Live Demo in jsFiddle

Live Demo in Bootply

的JavaScript

HTML