Question

我有一个动态生成的表单系统。

下面的代码是调用日历的按钮。

<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">

这是单击上面按钮时显示的div。当在div中单击时，该按钮切换样式display:none：

<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single">
Calendar Here
</div>

我想在有人点击div之外时隐藏日历。

我试过这个JS，但它不能正常工作，因为它将display:none设置为div。我做错了什么？

jQuery(document).click(function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});

Answer 1

您无法将点击事件绑定到文档。把它绑在身上。

jQuery('body').click(function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});

or

jQuery(document).on('click', 'body', function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});

Answer 2

你可以使用这样的技巧，检查下面的代码

...
"url": "mongodb://localhost:27017/app_db?ssl=true",
"server": {
    "sslValidate": true,
    "sslCA": "path to file"
    },
...

$(document).dblclick(function (e)
                                {
                var container = $(".yui-calcontainer");
                if (!container.is(e.target) // if the target of the click isn't the container...
                    && container.has(e.target).length === 0) // ... nor a descendant of the container
                {
                    container.hide();  /// or container.toggle();  to show/hide

                }
            });

使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body style="height:100% ; width:100%;";> <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> Calendar Here </div> </body>进行显示/隐藏

请告诉我这是否对您有所帮助。

这是我的HTMl

container.toggle();

Answer 3

看起来您正在尝试使用YUICalendar库，在这种情况下，查看官方文档@ https://developer.yahoo.com/yui/calendar/

可能会有所帮助

我找到了一个可以实现您想要实现的目标的示例：https://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html

Answer 4

当您单击按钮时，您将看到div，再次单击该按钮时 div关闭且div打开时，您在div外单击... ... div 关闭...

$(document).ready(function(){
    $('#privacy').toggle();
    $('#privacybutton').click( function(e) {
        // stops link from making page jump to the top
        e.preventDefault();
        // when you click the button, it stops the page from seeing it as clicking the body too
        e.stopPropagation();
        $('#privacy').toggle();
    });
    $('#privacy').click( function(e) {
        // when you click within content area, it stops the page from seeing it as clicking the body too
        e.stopPropagation();
    });
    $('body').click( function() {
        $('#privacy').hide();
    });
});

在外面点击时隐藏DIV

5 个答案: