Question

在添加一个允许用户在点击外部时隐藏div的效果后，假设我的div可见的按钮不起作用，这是我的代码。

脚本：

    <script>

     document.getElementById('button').onclick = function() {
        document.getElementById('login').style.visibility = 'visible';
    }
    document.getElementById('closelogin').onclick = function() {
        document.getElementById('login').style.visibility = 'hidden';
    }

    </script>

    <script>
    var notH = 1,
      $pop = $('#login').hover(function(){ notH^=1; });

    $(document).on('mouseup keyup', function( e ){
      if(notH||e.which==27) $pop.hide();
    });

    $(document).on('mouseup', function(){
      if(notH)$pop.hide();
    });

    if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

    </script>

The Div：

    <div id="login" style="visibility:hidden">
    <button id="closelogin">Close</button>
    <input type="text" placeholder="Username"/>
    <p id="loginshiz">Pick a username</p>
    <button id="go">Go</button>
    </div>

按钮：

    <input type="button" id="button" value='Chat'/>

我认为它具有可见性：隐藏在div中？

Answer 1

用

替换您拥有的代码

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id.toLowerCase() === 'button') {
            $('#login').css('visibility', 'visible');
        }else if (e.target.id.toLowerCase() === 'closelogin') {
            $('#login').css('visibility', 'hidden');
        }else if ( !$(e.target).closest('#login').length ) {
            $('#login').css('visibility', 'hidden');
        }
    })
});

FIDDLE

应该使div可见，不工作的按钮

1 个答案: