javascript - Bootstrap - 在 Datepicker 中单击时关闭下拉菜单

Question

我正在使用 Bootstrap 和日期选择器。我在 boostrap dowpdown 中添加了一个日期选择器。选择日期时，下拉菜单会自动关闭。有关详细信息，请参阅图片:

操作1:点击下拉按钮，我们看到下拉列表。操作 2: 单击字段时。我将动态添加日期选择器。在操作 3 之后: 在选择日期时。下拉菜单越来越近，因此用户返回到操作 1。

我想做的是在用户点击日期之后。下拉菜单不应关闭。

我正在使用以下代码来防止点击在下拉列表中的表格上起作用，但不适用于日期选择器。

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

谁能帮我防止下拉菜单关闭。

<div class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span>
                    </a>
  <ul class="dropdown-menu keep-open-on-click">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

注意:当用户点击表格结束日期时，日期选择器将被动态添加。那是问题所在吗？

Answer 1

这个很麻烦。我在一些 Bootstrap 下拉菜单中也有几个日期选择器。我用两种方法解决了这个问题。

第一个使用 jQuery 来阻止事件在单击 DatePicker 时冒泡一次

$('.yourDatePicker').on('hide', function(event) {
    event.stopPropagation();
    $(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) {
       return false;
   });
});

另一个更永久的解决方案是更改 datepicker.js 文件本身。如果你打开它，你会发现看起来像这样的代码

click: function(e){
        e.preventDefault();
        var target = $(e.target).closest('span, td, th'),
            year, month, day;
        if (target.length === 1){
            switch (target[0].nodeName.toLowerCase()){
...ect...

如果给这个区域添加一个e.stopPropagation()函数，像这样

click: function(e){
        e.preventDefault();
        e.stopPropagation(); // <-- add this
        var target = $(e.target).closest('span, td, th'),
            year, month, day;
        if (target.length === 1){
            switch (target[0].nodeName.toLowerCase()){

你的日期选择器将停止干扰你的其他 DOM 元素，尽管这个解决方案更广泛，我会测试以确保它不会影响你代码中的其他区域。