Question

我想我可能知道这个问题的答案，但对jQuery世界来说还是比较新的我想我会问人们比我更聪明。我对这个主题的研究让我看到了我粘贴在下面的代码但是它不起作用。

以下是该场景：我有多个基于div / ul的下拉列表，当然具有相同的类名。我想要发生的是当单击下拉列表的按钮时，您可以单击下拉元素内部而不关闭下拉列表。我假设因为它们都有相同的类，stopPropogation不起作用。这是jQuery代码：

<script type='text/javascript'>
$('.dropdown-menu').each(function(){
    $(this).click(function(event){
        if($(this).hasClass('keep_open')){
         event.stopPropagation();
        }
     });
});
</script>

以下是其中一个下拉列表（其中有多个下拉列表）的示例。如果您注意到类似的类名，我会使用Twitter Bootstrap：

<div class="btn-group">
    <div class="btn btn-mini" tabindex="-1">DROPDOWN NAME</div>
    <div class="btn btn-mini dropdown-toggle" data-toggle="dropdown" tabindex="-1">
        <span class="caret"></span>
    </div>
    <ul class="dropdown-menu dropdown-pad keep-open">
        <li><b>Info:</b> <small>NAME INFO</small></li>
        <li><b>Thoughts:</b> <small>THOUGHT INFO</small></li>
        <li><b>Favorite Places:</b>
            <br><small>FAVORITE PLACE<br>FAVORITE PLACE 2</small>
        </li>
    </ul>
</div>

修改所以jQuery部分中不太可能出现错误，但是下拉div本身就有一些错误。在同一页面上，我使用了下拉列表的以下变体，它就像一个冠军：

<div class="btn-toolbar">
    <div class="btn-group">
    <a class="btn dropdown-toggle" href="#" data-toggle="dropdown">
      Department
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu keep_open">
       <li>Customer Service</li>
       <li>Tech Support</li>
    </ul>
    </div>
</div>

Answer 1

不确定它与您的问题有关，但您应该将您的代码包装在document.ready回调函数中：

$(function(){ //or $(document).ready(function(){
    $('.dropdown-menu').each(function(){
        $(this).click(function(event){
            if($(this).hasClass('keep_open')){
             event.stopPropagation();
            }
         });
    });
 });

Answer 2

准备好文件，但是：

<击>

$('.dropdown-menu').each(function(){
    $(this).click(function(event){
        if($(this).hasClass('keep_open')){
         event.stopPropagation();
        }
     });
});

可能就是这样：

$('.dropdown-menu').click(function (event) {
    if ($(this).hasClass('keep_open')) {
        event.stopPropagation();
    }
});

最终版本：

$(document).ready(function(){
    $('.dropdown-menu').click(function (event) {
        if ($(this).hasClass('keep_open')) {
            event.stopPropagation();
        }
    });
});

交替：

$('.btn-group').on('click', '.dropdown-menu', function (event) {
    if ($(this).hasClass('keep_open')) {
        event.stopPropagation();
    }
});

编辑：基于您可能需要的评论：

$('.btn-group .dropdown-menu .keep_open').children().on('click', function (event) {
    event.stopPropagation();//or the next one
    event.stopImmediatePropagation();
});

<击> EDIT2 OMG我是个白痴：

$('.btn-group').on('click', '.dropdown-menu', function (event) {
    if ($(this).hasClass('keep-open')) {
        event.stopPropagation();
    }
});

'keep-open' vs 'keep_open'

Answer 3

对于多个元素和直播活动，请使用附加到document.body级别下面的元素的.on()：

$(document).on('click', '.dropdown-menu', function(e){
    $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional.
});

不需要使用$(document).ready()

Answer 4

我明白了。感谢@Mark Schultheiss，它最终点击了正在发生的事情。然而，原始的jQuery工作，第一种不起作用的下拉类型有keep-open而不是keep_open。这就是为什么第二种下拉式工作而不是第一种。测试它，它现在有效。谢谢大家的帮助！

Answer 5

遇到与此用户相同的问题，但这些解决方案无效：Twitter Bootstrap cant stop a dropdown from closing on click

决定打开一个单独的问题而不是旧的问题，以防新版本的问题不同。

具有相同类的多个元素的jQuery函数

5 个答案: