HTML引导崩溃犯规在第一次按下按钮正常工作

问题描述 投票:0回答:2

你能帮我与引导和JavaScript崩溃吗?我有两个崩溃卡。比你点击链接,首先应该卡可见。点击后应该表现出下一张牌,并首先应该消失。它的功能,但在第一次点击有两个卡。这就是第二次点击后修复。感谢ü的帮助。

HTML:

<div class="card text-center">
      <div class="card-header ">           
             <a class="nav-link" id="spust" href="#">Kontaktní formulář</a>

      </div>
   <div id="kontakty">     
   </div>

   <div class="collapse" id="konform">
   </div>
</div>

使用Javascript:

var collapsestate = false;
jQuery('#spust').on("click",function(e) {

if (collapsestate == false){

      $('#kontakty').collapse('hide');
      $('#konform').collapse('show');
      collapsestate = true;
}
else{
    $('#konform').collapse('hide');
    $('#kontakty').collapse('show');
    collapsestate = false;
}
console.log(collapsestate);
});
javascript html twitter-bootstrap collapse
2个回答
0
投票

在这个片段中的代码尝试......我觉得这个片段是按您的要求。

        $(document).ready(function(){
            var collapsestate = false;
            $('#kontakty').collapse('show');
            
            $('#spust').on("click",function(e) {

            if (collapsestate == false){

                $('#kontakty').collapse('hide');
                $('#konform').collapse('show');
                collapsestate = true;
            }
            else{

                $('#kontakty').collapse('show');
                $('#konform').collapse('hide');
                collapsestate = false;
            }
            console.log(collapsestate);
        });

        });
<!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>Demo</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
    <div class="card text-center">
        <div class="card-header ">           
            <a class="nav-link" id="spust" href="#">Kontaktní formulář</a>
        </div>
        <div id="kontakty"> 
            abcd   
        </div>

        <div class="collapse" id="konform">
            1234
        </div>
    </div>
  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

0
投票

您可以添加“显示:无”,使“KONTAKT”无形前点击:

<div id="kontakty" style="display:none">
</div>
© www.soinside.com 2019 - 2024. All rights reserved.