15

デフォルトでdivを非表示にし、ボタンをクリックして表示しようとしています。div を閉じるには、ボタンをクリックするか、画面上の任意の場所をクリックします。以下は私の試みですが、最後の部分が機能していません。誰かが私に正しい実装、またはこれを行うためのより良い方法を教えていただければ幸いです。

$('#theDiv').hide();

$("#showDivBtn").click(function(){
  $("#theDiv").show();
});

if ( !$('#theDiv:hidden') ) {

$(document).click(function() {
    $('#theDiv').hide();
});
$('#theDiv').click(function(e) {
    e.stopPropagation(); 
    return false;        
});

}

});
4

5 に答える 5

21

イベント ハンドラー全体を条件内に配置すると、最初のページ読み込み時にのみ条件がチェックされ、イベント ハンドラーはおそらくアタッチされません。代わりに次のように試してください。

$('#theDiv').hide();

$(document).on('click', function(e) {
    if ( $(e.target).closest('#showDivBtn').length ) {
        $("#theDiv").show();
    }else if ( ! $(e.target).closest('#theDiv').length ) {
        $('#theDiv').hide();
    }
});

フィドル

于 2013-06-12T05:46:48.003 に答える
1

これを試して、

$('#theDiv').hide();

    $("#showDivBtn").click(function(){
      $("#theDiv").toggle();
    });

    $(document).on("click" , function(event){

    if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
    {
    $('#theDiv').hide();
    }
    });
于 2013-06-12T07:08:13.380 に答える
0

使ってみて

if( !$('.theDiv' ).is( ':visible' ) )

それ以外の

if ( !$('.theDiv:hidden') )

于 2013-06-12T05:58:09.450 に答える
0

これを試して

    <script type="text/javascript">
    $('.opendiv').hide();
    $(document).click(function (event) {
        var $target = $(event.target);
        if ($target.attr('id') == 'addAccordion') {
            if ($('.opendiv').is(':hidden')) {
                $('.opendiv').show();
            }
            else {
                $('.opendiv').hide();
            }
        }
        else if ($target.closest('.opendiv').length > 0) {

        }
        else {
            $('.opendiv').hide();

        }

    })
</script>
 <div>
    <input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
            www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</div>
于 2013-06-12T06:06:47.647 に答える
0

そのようなハンドラーでターゲットdocumentにできるとは思いません。.click

文字通りどこでもクリックして DIV を閉じることができるようにするのではなく、そのように見せるだけです。閉じたい DIV の後ろに明確な DIV を配置し、画面全体をカバーできるようにします。次に、クリックハンドラーをそれにアタッチできます。

HTML:

<button>Click me to show the DIV</button>
<div class="container">
    <div class="thediv">
        <p>I'm the DIV</p>
    </div>
</div>

JavaScript:

$(document).ready(function () {
    var $button = $("button");
    var $container = $("div.container");
    $button.click(function () {
        $container.show();
    });
    $container.click(function () {
        $container.hide();
    });
});

CSS:

div.container {
    display: none;
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
}
div.thediv {
    position: absolute;
    top: 30%;
    left: 10%;
    background-color: gray;
    color: white;
    padding-top: 1em;
    border-radius: 5px;
    width: 50%;
}
p {
    background-color: black;
    text-align: center;
    padding: 2em;
}

デモンストレーションの目的で、この Fiddleで背景の DIV を表示できるようにしました。

于 2013-06-12T06:37:51.777 に答える