Question

这个问题曾经被问过，但我似乎无法让它发挥作用。这是一个fiddle。您可以通过单击链接切换登录表单。如果您想隐藏它，可以再次单击该链接，或单击表单本身外部。

$j = jQuery.noConflict();

$j("a#login-link").click(function (e) {
    $j("div#custom-login").slideToggle("fast");
    e.preventDefault();
    e.stopImmediatePropagation();
});

$j(document).click(function (e) {
    if ($j("div#custom-login").is(":visible") && !$j("div#custom-login, div#custom-login *").is(e.target)) {
        $j("div#custom-login").slideUp("fast");
    }
});

问题是在表单内部单击仍会隐藏表单 - 除非您在边框处单击，这很奇怪。解决方案是添加*选择器以获取所有子元素，如下所示：

$j(document).click(function (e) {
    if ($j("div#custom-login").is(":visible") && !$j("div#custom-login, div#custom-login *").is(e.target)) {
        $j("div#custom-login").slideUp("fast");
    }
});

但我无法想象不能这样做呢？

Answer 1

很简单，只需添加以下代码：

$j("div#custom-login").click(function (e) {
    e.stopPropagation();    
});

DEMO HERE

Answer 2

尝试

$j(document).click(function (e) {
    if ($j("div#custom-login").is(":visible") && !$j(e.target).closest("#custom-login").length) {
        $j("div#custom-login").slideUp("fast");
    }
});

演示：Fiddle

重要提示 如果你有一个id作为选择器只使用div#custom-login作为选择器

，那么使用像#custom-login这样的选择器是不好的做法

Answer 3

这条线是否指定它在可见时向上滑动以及何时是所选目标？：o

if ($j("div#custom-login").is(":visible") && !$j("div#custom-login, div#custom-login *").is(e.target)) {

如果不是单击目标，请隐藏

3 个答案: