HTML bootstrap 第一次正确按下按钮时无法折叠

Question

你能帮我解决 bootstrap 和 javascript 崩溃吗？我有两张崩溃卡。第一张卡片应该比你点击 link 可见。点击后应该显示下一张卡片，第一张应该消失。它是功能性的，但在第一次点击时有两张卡。第二次点击后修复。谢谢你的帮助。

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

Answer 1

您可以添加 "display:none" 使 'kontakt' 在点击之前不可见：

<div id="kontakty" style="display:none">
</div>

Answer 2

试试这个片段代码...我认为这个片段符合你的要求。

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

HTML bootstrap 第一次正确按下按钮时无法折叠

HTML bootstrap collapse doesnt working at first button press properly

html

javascript

collapse

twitter-bootstrap