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 をクリックすると、the_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 に答える