Javascript 引导-下拉菜单在日期选择器中单击关闭

我正在使用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>

---

注意：当用户单击表以结束日期时，将动态添加datepicker。这就是问题所在吗？

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

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

应该有用。

试试这个代码

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

---

如果我正确理解了您的问题，那么您正试图捕获日期选择器选择的

更改

事件，并阻止完成默认操作。试试这个：

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

示例如下：

更新1

如果没有你的代码作为例子，我猜是这样的：-这里我们有一个下拉列表，里面有一个

日期选择器。当我添加代码以便单击该表单元格将其转换为带有日期选择器的输入时，它会劫持下拉菜单的功能-可能是因为它是下拉菜单中的下拉菜单

也许您需要更好的UI设计来处理此类场景。在一张桌子里，在一个手风琴面板里，在一个下拉列表里，一个日期选择器下拉列表可能会像编码一样难以使用

更新2

关于如何更好地控制基本用例中的下拉列表，这里有一个很好的答案：
我无法解决这个问题，所以我将解决方案从下拉列表改为模式

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

这个很麻烦。我还有几个日期选择器，位于一些引导下拉菜单中。我用两种方法解决了这个问题

第一种方法使用jQuery阻止事件在单击日期选择器时冒泡一次

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

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()){

如果向该区域添加一个e.stopPropagation（）函数，如下所示

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

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()){

点击：功能（e）{
e、 预防默认值（）；
e、 停止传播（）；//我不担心日期选择器关闭，我的下拉菜单在我选择日期后会关闭。@JB06是因为点击通过日期选择器导致后面的下一个部分打开了吗？还是只是关闭了？它只是关闭了下拉菜单..当我再次打开时..我们看到日期是在编辑框中选择的。日期选择器library必须使用分配给您下拉列表的同一类来关闭日期选择器。请尝试在日期选择器中关闭自动关闭，看看是否仍然发生这种情况。我也尝试过，但没有用。@jb06问题不在于日期选择器。您能看到问题吗？是的，但我不明白，为什么不为其制作一支笔，以便我们可以更好地帮助您解决此问题伙计，你说的是手风琴小部件的下拉菜单吗？我尝试了你的代码，它只是激活了其他不需要的功能。但问题仍然存在。你不明白。我的问题是下拉菜单越来越近，而不是日期选择器。我使用的代码仍然不起作用。帮助我们理解。这里有很多答案，但都不起作用？也许你的问题不清楚。发布一些代码，这会有所帮助。我已经添加了详细操作，请检查。