Question

CODE：

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

问题：如何删除双击要求ot显示div？

Answer 1

单击任意位置时，检查元素是否在传播路径上。如果没有，用户点击它外面就可以隐藏它。

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

http://jsfiddle.net/vdHAu/

Answer 2

jQuery Toggle正是您要找的。

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

Answer 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);
});

Answer 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);
    });
});

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

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

5 个答案: