Question

在下面的代码中，jquery show和jQuery hide函数不起作用.. 虽然这是基本的事情，但我在过去1小时内无法通过这个... 我无法隐藏并显示div ... 请帮忙

<!DOCTYPE html>
<html>
<head>
    <title>sample</title>


    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

             $(document).ready(function(){



            var fieldExample = $('#myTags');


            fieldExample.focus(function() {
                var div = $('div#showDiv').show();
                $(document).bind('focusin#showDiv click#showDiv',function(e) {
                    if ($(e.target).closest('#showDiv, #myTags').length) return;
                    $(document).unbind('#showDiv');
                    div.fadeOut('medium');
                });
            });
        $('div#showDiv').hide();

             })

    </script>
</head>
<body>
<input id="myTags"/>

  <div id="showDiv" style="height:200px;width:200px;background-color:red;"></div>
</body>
</html>

Answer 1

尝试

$(document).ready(function () {
    var $field = $('#myTags'),
        $div = $('.showDiv').hide();

    $field.focus(function () {
        $div.show();
    });
    $(document).on('focusin click', function (e) {
        if ($(e.target).closest('.showDiv, #myTags').length) return;
        $div.fadeOut('medium');
    });

})

演示：Fiddle

Answer 2

使用以下代码

<script type="text/javascript">

         $(document).ready(function(){



        var fieldExample = $('#myTags');


        fieldExample.focus(function() {
            var div = $('div#showDiv');
             div.show(); //show div
            $(document).on('focusin,click','#showDiv',function(e) {
                if ($(this).closest(' #myTags').length) return;

                $('#showDiv').off('focusin,click');
                div.fadeOut('medium');
            });
        });
    $('div#showDiv').hide();

         })

</script>

参考 on

jquery .show（）和.hide（）不工作..！

2 个答案: