0

我想我可能知道这个问题的答案，但是对于 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>
4

5 回答 5

1

包装在一个准备好的文件中，但是这个：

$('.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'对比'keep_open'

于 2013-04-19T14:13:43.777 回答
1

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

$(function(){ //or $(document).ready(function(){
    $('.dropdown-menu').each(function(){
        $(this).click(function(event){
            if($(this).hasClass('keep_open')){
             event.stopPropagation();
            }
         });
    });
 });
于 2013-04-19T14:06:11.710 回答
0

对于多个元素和实时事件，使用.on()附加到 document.body 级别以下的元素：

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

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

于 2013-04-19T14:13:54.417 回答
0

我想到了。感谢@Mark Schultheiss，它最终点击了发生的事情。原来的 jQuery 可以工作，但是，第一种不工作的下拉列表有一个 class ofkeep-open而不是keep_open. 这就是为什么第二种下拉菜单起作用而不是第一种的原因。测试了它，它现在可以工作了。谢谢大家的帮助！

于 2013-04-19T16:08:44.317 回答
0

与该用户有相同的问题，但这些解决方案不起作用： Twitter Bootstrap cant stop a dropdown from close on click

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

于 2013-08-19T04:08:30.887 回答