Сбой при загрузке HTML не работает при первом нажатии кнопки - PullRequest
Новая
       8

Сбой при загрузке HTML не работает при первом нажатии кнопки

0 голосов
/ 06 февраля 2019

Можете ли вы помочь мне с этим бутстрапом и крахом 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);
});

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

попробуйте этот код фрагмента ... Я думаю, этот фрагмент соответствует вашим требованиям. 

        $(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 голосов
/ 06 февраля 2019

Вы можете добавить «display: none», чтобы сделать «kontakt» невидимым перед тем, как щелкнуть по нему: 

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