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

【问题标题】：Click Element isn't showing/hiding properly单击元素未正确显示/隐藏
【发布时间】：2014-09-14 12:23:38
【问题描述】：

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

更多信息：

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

这是我的代码：

<!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>

【问题讨论】：

“所以我必须先点击链接才能让它开始正常工作，我该如何修复它以便它在第一次点击时工作”： - 首先点击什么..？
@TJ 那个 jsfiddle 演示了什么？它似乎没有做任何事情。编辑哦等等我看到了。
@Pointy 好吧，你首先是对的。我认为第一次点击链接没有显示 div...我不确定 OP 还想点击什么.. 0__0
你到底想做什么？为什么需要在文档上使用 mouseup？
我试图让一个 div 出现，然后在显示和隐藏功能中消失，问题是我也希望它在我在 div 之外时消失，如果它可见，它所有的工作，但问题是当我第一次加载页面然后单击链接以显示 div 时，它不会出现，只有当我第二次单击它时才会出现。这是我要解决的问题

标签： javascript jquery

【解决方案1】：

为什么不使用click() 方法而不是mouseup()？

$('a').click(function (e) {
    var container = $("#boxwrapper");
    if (container.is(':visible')) {
        Hide();
    } else {
        Display();
    }
    return false;
});

如果您不想将此事件绑定到您网站上的每个<a>，请将类添加到您的元素并将点击绑定到此类。例如：

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

然后在你的脚本中：

$('a.divToggle').click(function (e) { });

【讨论】：

谢谢我会整理代码，我可以让它打开和关闭，但我希望当用户在任何地方点击它时隐藏 div，这就是使用 mouseup 的原因
所以使用$('html, body')而不是$('a')，它也应该可以工作。
我把它放在一起，但它似乎并没有达到我想要的效果，
使用mouseup有什么问题？如何使用click() 方法来解决 OP 的问题？

【解决方案2】：

看到这个工作fiddle

JavaScript

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

【讨论】：

这一切都和$('#boxwrapper').toggle();一样
你能解释一下为什么这会解决 OP 的问题吗？
display 作为 onclick 的参数传递。触发此功能，div 将显示，反之亦然。

【解决方案3】：

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

组织你的代码

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

Click 和 MouseUp 事件的区别

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

防止默认可能？

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

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

【讨论】：

这并不能回答问题或解决问题。 Becuase there is no issue 你所说的这些东西都不适用于这种情况。
@TJ：我知道这不是一个答案，但我们正在努力解决这个问题，因为很难重现它。可能是空白或任何其他东西。没有必要对答案投反对票。
1) 我知道这不是答案。 2) 根据您的回答：真正的问题：防止默认。来自您的评论：可能是空白或任何其他东西。因此投反对票。 P.S : 试图解决问题 不是答案。您可以在 cmets 中执行此操作。顺便说一句，就像我说的那样，您上面提到的任何事情都不适用于这里。 downvote 工具提示显示：“这个答案没有用”