jQuery 在日期选择器中单击时隐藏元素

Question

我有一个隐藏的 div，它会在单击按钮时显示，当我单击页面中的其他地方时隐藏。

现在问题来了：在我的 div 中，每当我点击 next/prev 或 select 日期时，我都会有日期选择器，div 会向上滑动。我怎样才能避免这种情况？

代码在这里：

$(document).click(function(evt) {
    if(evt.target.id!='btn' )
         if($('#div').is(':visible')) {
              $('#div').slideUp();
          }
 });

$("#div").click(function(e) {
                e.stopPropagation(); 
                return false;     
            });

 $('#btn').click(function () {
                if($('#div').is(':visible')) {
                    $('#div').slideUp();
                }
                else{
                   //initialize controls
                    $('#div').slideDown();
                }

            });

更新： jsfiddle 已添加。

Answer 1

如果您单击文档正文中除按钮 'btn'、您的 div 本身和 div [=14= 之外的任何地方，则必须向上滑动所需的 div ]:

$(document).click(function(e) {
 if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
       if($('#div').is(':visible')) {
              $('#div').slideUp();
          }
    }
});

Answer 2

你的document.ready你在if块写错了，我修改为

 if(evt.target.id!='btn' ){
             if($('#div').is(':visible')) {
                  $('#div').slideDown();
              }
}

同时尽量避免将 id 用作 'btn'，因为如果您在设计中使用更多 css，此 id 或 class 会造成混淆

Answer 3

请检查我的js fiddle

我已经添加了日期选择器 ID #ui-datepicker-div" 以停止传播，并且成功了。

$(document).click(function(evt) {
    if(evt.target.id!='btn' )
         if($('#div').is(':visible')) {
              $('#div').slideUp();
         }
 });
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
                e.stopPropagation(); 
                return false;     
            });

 $('#btn').click(function () {
                if($('#div').is(':visible')) {
                    $('#div').slideUp();
                }
                else{
                   //initialize controls
                    $('#div').slideDown();
                }

            });

Answer 4

这是同一问题的另一个版本。对那些不会隐藏您的 div 的元素使用一些常见的 class。希望对您有所帮助：

HTML :

<html>
<body>
<div id="container" style="display:none">
    <input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>

JS :

var display = function () {
$("#container").toggle();
   $("body").off("click").on("click", function (event) {
          if ($(event.target).hasClass("prevent-click")) {
                return;
           }
           $("#container").hide();
    });
  }

jQuery 在日期选择器中单击时隐藏元素

jQuery hide element when click in datepicker

javascript

jquery

jquery-ui-datepicker