0

代码：

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

4

5 回答 5

2

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

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

http://jsfiddle.net/vdHAu/

于 2013-06-20T13:26:47.857 回答
2

jQuery Toggle是您正在寻找的。

$('.the_box_to_show').toggle();
于 2013-06-20T13:27:11.950 回答
1 
$(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);
});
于 2013-06-20T13:30:08.893 回答
1

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

您必须将属性 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);
    });
});
于 2013-06-20T13:31:30.613 回答
0

看一下这个

$('.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();
});
于 2013-06-20T13:31:33.790 回答