jquery顯示隱藏的div只有幾毫秒

div nav - contentoverlay和div測試只顯示幾毫秒，然後消失。它們如何顯示，直到下一次點擊其中一個？jquery顯示隱藏的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>

來源

2017-06-03 rabea

.js--toggle是一個鏈接，所以當你點擊它的網頁下面的鏈接（刷新頁面）。你需要通過事件傳遞給你的函數單擊處理程序，並使用preventDefault()

$(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'); 
 
    }); 
 
});

.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; 
 
}

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

來源

2017-06-03 21:44:01

這工作正常禁用鏈接的默認操作。我是個傻瓜，不會注意到這一點。非常感謝你！ – rabea

jquery顯示隱藏的div只有幾毫秒

回答

相關問題