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をわずか数ミリ秒で表示します

答えて

関連する問題