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

Question

我正在使用Bootstrap和日期选择器。 我在boostrap dowpdown中添加了一个日期选择器。 选择日期时，下拉列表会自动关闭。 请参阅图像以获取更多信息：

动作1：单击下拉按钮，我们将看到下拉列表。 动作2：单击字段时。 我将动态添加datepicker。 动作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下拉菜单中，我还有几个datepicker。 我用两种方法解决了这个问题。

第一个使用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元素，尽管此解决方案更为广泛，并且我将进行测试以确保它不会影响代码中的其他区域。

Answer 2

您的代码应该可以，但是

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

这是在日期选择器上寻找类（“ keep-open-on”），而不是下拉列表。 您需要在我相信的父母中找到它。

$(document).on('click', '.datepicker', function(e) {
        if ($(this).parents().find('keep-open-on-click')) { e.stopPropagation(); }
    });

应该管用。

Answer 3

试试这个代码，

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

Answer 4

如果我正确理解您的问题，则您正在尝试捕获datepicker选择的change事件并阻止完成默认操作。 尝试这个：

$('#your-datepicker-input').datepicker({
}).on('change', function(e) {
    console.log("changed");
  e.preventDefault();
});

此处的示例： https : //jsfiddle.net/shanabus/a5f82nsy/

更新1

如果没有您的代码作为示例，我猜它是这样的： https : datepicker在这里，我们有一个带有datepicker的下拉菜单。 当我添加代码以便单击该表格单元格将其转换为带有日期选择器的输入时，它会劫持下拉菜单的功能-可能是因为该下拉菜单在下拉菜单中。

也许您将需要更好的UI设计来处理这种情况。 在表格内部，手风琴面板内部，下拉菜单内部的datepicker下拉菜单可能很难像在编码时那样使用。

更新2

关于如何更好地控制基本用例中的下拉列表，这是一个很好的答案： https : //stackoverflow.com/a/19797577/88732

Answer 5

我无法解决此问题，因此我将解决方案从下拉菜单更改为Modal。

<div class="dropdown">
  <a href="#" data-toggle="modal" data-target="#NModal"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span>
                    </a>
<div id="NModal" class="modal fade" role="dialog" style="min-width: 650px;">
<div class="modal-dialog">
<!-- My Code -->
</div>
</div>