Question

我的代码有问题，我正在尝试创建一个隐藏和显示div的函数并且它正常工作，但它最初工作，它仅适用于第二次点击，所以我必须先点击链接才能让它开始正常工作，如何修复它以便它在第一次点击时工作？

更多信息：

我试图让div显示然后消除我们在显示和隐藏功能，捕获是我也希望它消失时，我在div之外，如果它可见，它的所有工作，但问题是当我第一次加载页面然后单击链接以显示div，它显示dosnt，只有当我第二次单击它时它才会出现。这是我想解决的问题

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <script src="js/jquery.foggy.min.js"></script>    


    <style>

        body {
            background: black;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: 100%;
            color: white;
            font-family: 'Segoe UI';
            font-size: 24px;
        }

        .box 
        {
            width: 100%;
            margin: auto;
            top: 0px;
            left: 20%;
            right: 0px;
            bottom: 0px;
            background-color: white;
            opacity: 0.4;
            position: fixed;
            overflow-y: scroll;
            overflow-x: scroll;
        }

    </style>


  </head>
  <body>

    <script lang="en" type="text/javascript">

        $(document).ready(function () {


        });

        $(document).mouseup(function (e) {

            var container = $("#boxwrapper");

            if (!container.is(e.target) && container.has(e.target).length === 0) {
                if (container.is(':visible'))
                    Hide();
            }
        });

        function Display() {
            $("#boxwrapper").show();
            $("#boxwrapper").addClass("box");
            $("#main").foggy();
        }

        function Hide() {
            $("#boxwrapper").hide();
            $("#main").foggy(false);
        }
    </script>



        <div id="main">
               <a href="#" onclick="Display()">Display Div</a>
        </div>

        <div id="boxwrapper">
        </div>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

为什么不使用click()的{{1}}方法入侵者？

mouseup()

如果您不想将此事件绑定到您网站上的每个$('a').click(function (e) { var container = $("#boxwrapper"); if (container.is(':visible')) { Hide(); } else { Display(); } return false; });，请将class添加到您的元素并将click单击绑定到此类。 E.g：

<a>

然后在你的脚本中：

<a href="#" onclick="Display()" class="divToggle">Display Div</a>

Answer 2

查看此工作fiddle

的JavaScript

function display() {
    if ($('#boxwrapper ').css('display') === 'none') {
        $('#boxwrapper').show();
    } else {
        $('#boxwrapper').hide();
    }
}

Answer 3

问题可能是空白或任何事情，因为很难重现它，但这里有一些可能导致问题的建议或事情：

整理您的代码

首先，您需要组织代码并在文件末尾加载JS库或将函数包装在$(document).ready中。
如果你已经使用了jQuery，为什么要在元素本身上使用onClick事件，如果你能用jQuery做的话。
您可以在css中将display: none添加到#boxwrapper，而不是文档mouseUp事件中的所有代码。
您可以使用toogleClass('box') jquery function

Hide()

Show()

Click和MouseUp事件之间的区别

使用mouseup事件，您可以单击屏幕上的其他位置，按住单击按钮，然后将指针移动到mouseup元素，然后释放鼠标指针。 click事件需要在该元素上发生mousedown和mouseup事件。

防止违约？

你不是preventing Default on your click event。你可以这样做：

<a href="#" onclick="Display(); return false;">Display Div</a>

单击元素未正确显示/隐藏

3 个答案:

的JavaScript

整理您的代码

Click和MouseUp事件之间的区别

防止违约？