问

单击里面,避免关闭下拉菜单

温德军46867 发布于 2022-12-31 08:40

twitter

bootstrap

pdo

java

我有一个Twitter Bootstrap下拉菜单.正如所有Twitter Bootstrap用户都知道的那样,下拉菜单会在点击时关闭(甚至在其中单击).

为了避免这种情况,我可以在下拉菜单上轻松附加一个click事件处理程序,只需添加着名的event.stopPropagation().


  
    
       Menu item 1

然而,这看起来很容易并且是非常常见的行为,并且由于carousel-controls(以及carousel indicators)事件处理程序被委托给document对象,因此click这些元素上的事件(prev/next controls,...)将被"忽略".

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

由于以下原因,依赖Twitter Bootstrap下拉hide/ hidden事件不是解决方案:

两个事件处理程序提供的事件都不会引用您单击的元素

下拉菜单内容是动态生成的,因此flag无法添加类

这个小提琴是正常的行为,这个小提琴是event.stopPropagation()附加的.

更新

感谢罗曼的回答.我也找到了一个你可以在下面找到的答案.

9 个回答

删除数据属性data-toggle="dropdown"并实现下拉列表的打开/关闭可以是一种解决方案.

首先通过处理链接上的点击来打开/关闭下拉列表,如下所示:

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

然后听取下拉列表外的点击以关闭它,如下所示:

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

这是演示:http: //jsfiddle.net/RomaLefrancois/hh81rhcm/2/

2022-12-31 08:42 回答

mobiledu2502881467

这也应该有所帮助

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


                
                    2022-12-31 08:43  回答
                       牛氏学道_246


                        
                这可能有所帮助: 

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})

        
                
                    2022-12-31 08:45  回答
                       梁琦rx1987_865
                
            
                        
                $('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});


这可能适用于任何条件.

        
                
                    2022-12-31 08:45  回答
                       mobiledu2502910181
                
            
                        
                Bootstrap提供以下功能:

                 | This event is fired immediately when the hide instance method 
hide.bs.dropdown | has been called. The toggling anchor element is available as the 
                 | relatedTarget property of the event.

因此,实现此功能应该能够禁止关闭下拉列表.

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});

        
                
                    2022-12-31 08:45  回答
                       oz法卡山英雄营
                
            
                        
                我也找到了解决方案.

假设Twitter Bootstrap Components相关事件处理程序被委托给document对象,我循环附加的处理程序并检查当前单击的元素(或其父项之一)是否与委托事件有关.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); //Always stop propagation
});


希望它可以帮助任何人寻找类似的解决方案.

感谢大家的帮助.

        
                
                    2022-12-31 08:45  回答
                       
                
            
                        
                绝对最好的答案是在类下拉菜单后面添加一个表单标记

所以你的代码是

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>

        
                
                    2022-12-31 08:45  回答
                       手机用户2502925763
                
            
                        
                我最近遇到了类似的问题，并尝试了不同的方法来解决此问题，方法是删除数据属性data-toggle="dropdown"并click通过event.stopPropagation()调用进行监听。

第二种方法看起来更可取。Bootstrap开发人员也使用这种方式。在源文件中，我发现了dropdown元素的初始化：

// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);


因此，此行：

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })


建议您可以form使用class 将一个元素放入容器内，.dropdown以避免关闭下拉菜单。

        
                
                    2022-12-31 08:47  回答
                       朱衅赝
                
            
                        
                jQuery的:

<script>
  $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
    e.stopPropagation();
  });
</script>


HTML:

<div class="dropdown keep-inside-clicks-open">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
     Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>


演示:

通用:https:
 //jsfiddle.net/kerryjohnson/omefq68b/1/

您使用此解决方案的演示:http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

        
                
                    2022-12-31 08:48  回答
                       gengjiang3_946



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签