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

【问题标题】：Bootstrap - dropdown menu close on click in DatepickerBootstrap - 在 Datepicker 中单击时关闭下拉菜单
【发布时间】：2016-04-12 12:11:39
【问题描述】：

我正在使用 Bootstrap 和日期选择器。我在 boostrap downpdown 中添加了一个日期选择器。选择日期时，下拉菜单会自动关闭。参考图片了解更多信息：

操作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>

注意：当用户点击表格结束日期时，日期选择器将动态添加。那么问题来了？

【问题讨论】：

我不担心日期选择器关闭，我的下拉菜单在我选择日期后关闭。 @JB06
是不是因为点击通过日期选择器导致它后面的下一个部分打开？还是直接关闭？
它只是关闭下拉菜单。当我再次打开时。我们看到在编辑框中选择了日期。
日期选择器库必须使用分配给下拉列表的相同类来关闭日期选择器。尝试在日期选择器中关闭自动关闭，看看它是否仍然发生。
我也试过了但是没用..@JB06

标签： javascript jquery twitter-bootstrap datepicker

【解决方案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 元素，尽管此解决方案更为普遍，我会进行测试以确保它不会影响您代码中的其他区域。

【讨论】：

【解决方案2】：

试试这个代码，

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

【讨论】：

我试过你的代码，它只是激活了其他不需要的功能。但问题依然存在。

【解决方案3】：

你的代码应该可以工作，但是

$(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(); }
    });

应该可以。

【讨论】：

问题不在于日期选择器你能看到问题吗？
是的，但是我没看懂，你为什么不给它做一支笔，这样我们就可以更好地帮助你了，伙计。
你说的是手风琴小部件的下拉菜单吗？

【解决方案4】：

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

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

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

更新 1

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

也许您需要更好的 UI 设计来处理这种情况。表格内、手风琴面板内、下拉菜单内的日期选择器下拉菜单使用起来可能和编码一样棘手。

更新 2

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

【讨论】：

你不明白。我的问题是下拉菜单越来越接近日期选择器。我用你的代码还是不行..
帮助我们理解。这里有很多答案，但没有一个有效？也许你的问题不清楚。贴一些代码，会有帮助的。
我已经添加了详细的操作，你可以检查一下。

【解决方案5】：

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

<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>

【讨论】：