Question

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

操作1：点击下拉按钮，我们会看到下拉列表。 操作2：点击fiel时。我将动态添加datepicker。 操作3之后：在日期上选择时。 Dropdown越来越近，用户又回到了行动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元素，虽然这个解决方案更广泛，我会测试以确保它不会影响代码中的其他区域。

Answer 2

您的代码应该可以工作

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

这是在日期选择器上寻找课程（＆＃39;保持开放＆＃39;），而不是下拉列表。你需要在我相信的父母身上找到它。

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

如果我正确理解您的问题，您将尝试捕获日期选择器选择的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

Answer 5

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

<div id="tabstrip-2" style="overflow: hidden">
                        <div id="tabStrip2Half1">
                            <div class="divHeightStyle">
                                <label for="accountNumber" class="labelTextSize">Account Number:</label>
                                <input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="accountNumber" placeholder="Account Number" />
                            </div>
                            <div class="datepickerStyle">
                                <label for="postingDate" class="labelTextSize">Posting Date:</label>
                                <input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="postingDate" />
                            </div>
                            <div class="divHeightStyle">
                                <label for="desccription" class="labelTextSize">Description:</label>
                                <input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
                            </div>
                            <div class="datepickerStyle">
                                <label for="maturityDate" class="labelTextSize">Maturity Date:</label>
                                <input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="maturityDate" />
                            </div>
                        </div>
                        <div id="tabStrip2Half2">
                            <div class="divHeightStyle">
                                <label for="documentType" class="labelTextSize">Document Type:</label>
                                <input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="documentType" />
                            </div>

                            <div>
                                <button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
                                <button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
                            </div>
                        </div>
                    </div>

在Datepicker

5 个答案: