如何在点击和用户点击离开时使用 jquery 隐藏元素？答案

【问题标题】：How do I hide a element using jquery on click and when a user clicks away?如何在点击和用户点击离开时使用 jquery 隐藏元素？
【发布时间】：2013-06-20 13:25:04
【问题描述】：

代码：

<script type="text/javascript">

$(document).ready(function() {
    $('.show_or_hide_link_clicker').click(function() {
        $(".the_box_to_show").fadeIn(400);
    });
});
</script>

当单击 show_or_hide_link_clicker 时，将显示_box_to_show。如果再次单击 show_or_hide_link_clicker 或当用户单击离开时，如何隐藏它？

更新：这就是我现在正在做的事情：http://jsfiddle.net/nFbnr/

问题：如何取消双击不显示 div 的要求？

【问题讨论】：

如何再次点击消失的链接？
所以你在编辑中删除：$(this).hide();这会以某种方式改变您的问题，因此使大多数答案不再准确。嗯……
@roasted 我发布的内容是我认为正确的。当我看到评论并意识到它是错误的时，我删除了它。
哈好吧，我现在更明白你的说法了！所以，没关系，我理解切换评论

标签： javascript jquery onclick show-hide

【解决方案1】：

jQuery Toggle 是你要找的。p>

$('.the_box_to_show').toggle();

【讨论】：

那么你将如何在这里使用它？
jsfiddle.net/joeterry/EKv9H - 我只需将 fadeIn 调用替换为 toggle。

【解决方案2】：

点击任意位置时，检查元素是否在传播路径上。如果没有，则用户在其外部单击，以便您将其隐藏。

$(document).click(function(e) {
    if ($(e.target).closest(".the_box_to_show").size() === 0) {
        $(".the_box_to_show").hide();
    }
});

http://jsfiddle.net/vdHAu/

【讨论】：

@starbucks 这不是完整的解决方案，我只是在这里解决“点击离开”。
这个东西的新手不知道如何解决它。不过谢谢。

【解决方案3】：

$(document).click(function(e) {
    if (!$(e.target).is(".the_box_to_show")) {
        $(".the_box_to_show").hide();
    }
});
$('.show_or_hide_link_clicker').click(function() {
    $(this).hide();
    $(".the_box_to_show").fadeIn(400);
});

【讨论】：

.is 在这里使用是错误的方法，我认为，如果您单击框下的元素，它也被视为单击框，但 .is 会得到误报大小写，因为它只检查您是否直接单击该框。
我不确定我是新手。让我再试一次。谢谢！

【解决方案4】：

另一种没有委托事件到文档级别的方式：

您必须将属性 tabindex 设置为框和样式的 CSS 轮廓

http://jsfiddle.net/GV56b/

$(document).ready(function () {
    $('.show_or_hide_link_clicker').click(function () {
        $(this).hide();
        $(".the_box_to_show").fadeIn(400, function () {
            this.focus()
        });
    });
    $(".the_box_to_show").on('blur',function(){
        $(this).hide();
        $('.show_or_hide_link_clicker').fadeIn(400);
    });
});

【讨论】：

【解决方案5】：

看看这个

$('.show_or_hide_link_clicker').click(function() {
    $(this).hide();
    $(this).addClass('active);
    $(".the_box_to_show").fadeIn(400);
});

$(document).on('click', 'html', function(){
  $(".the_box_to_show").fadeOut(400);
 });




$(document).on('click', '.active', function(e){
  e.stopPropagation();
});

【讨论】：