Question

div nav - contentoverlay和div测试只显示几毫秒然后消失。他们如何显示，直到下一次点击其中一个？

$(function() {

    $(".js--toggle").click(function() {

/* this functions ($(".test … and $("body … don't work as expected */

        $(".test,.nav--contentoverlay").addClass("js--transition__open");
        $("body").css("overflow", "hidden");
        });
        $(".test,.nav--contentoverlay").click(function() {
            $(".test,.nav--contentoverlay").removeClass("js--transition__open");
            $("body").css("overflow", "auto");
        });

    });

.test {
        width: 320px;
        height: 480px;
        background: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -240px 0 0 -160px;
        border: 1px solid #666;
        z-index: 999;
        visibility: hidden
    }

    .nav--contentoverlay {
        position: fixed;
        z-index: 1;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        background: black;
        opacity: 0.4!important;
        z-index: 7;
        visibility: hidden;
    }

    .js--transition__open {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.5s ease;
    }

<!doctype html>
<html lang="en">


<head>
    <title>test</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
    <div class="page">
        <div class="contentholder">
            <nav class="nav--global">
                <ul>
                    <li><a href="" class="js--toggle"  title="">test</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <nav class="nav--contentoverlay"></nav>
    <div class="test">Test</div>
</body>

</html>

Answer 1

.js--toggle是一个链接，因此当您点击该页面时，页面会跟随链接（刷新页面）。您需要通过在点击处理程序中将事件传递给您的函数并使用preventDefault()

来禁用链接的默认操作

＆＃13;

$(function() {
  $(".js--toggle").click(function(e) {
    e.preventDefault();
    /* this functions ($(".test … and $("body … don't work as expected */
    $(".test,.nav--contentoverlay").addClass("js--transition__open");
    $("body").css("overflow", "hidden");
  });
  $(".test,.nav--contentoverlay").click(function() {
    $(".test,.nav--contentoverlay").removeClass("js--transition__open");
    $("body").css("overflow", "auto");
    console.log('closed');
  });
});

＆＃13;

.test {
  width: 320px;
  height: 480px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -240px 0 0 -160px;
  border: 1px solid #666;
  z-index: 999;
  visibility: hidden
}

.nav--contentoverlay {
  position: fixed;
  z-index: 1;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  opacity: 0.4!important;
  z-index: 7;
  visibility: hidden;
}

.js--transition__open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">


<head>
  <title>test</title>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
  <div class="page">
    <div class="contentholder">
      <nav class="nav--global">
        <ul>
          <li><a href="" class="js--toggle" title="">test</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <nav class="nav--contentoverlay"></nav>
  <div class="test">Test</div>
</body>

</html>

＆＃13;

jquery显示隐藏的div只有几毫秒

1 个答案: