ダイアログが隠された後に崩壊の広がりが消えない

Question

私はcss：visibilityを隠して表示するモーダルダイアログを作成しました。

すべての物事がうまく働いたが崩壊してメニューがうまく機能していないJavascriptのコード

HideModal(){ 
var modal = document.GetElementById("myModal"); 
modal.style.visibility = "hidden"; 
} 

<div id="myModal"> 
    <a data-toggle="collapse" href = "#spread"> 
    <span class = "caret"></span>Spread 
    </a> 
    <div id = "spread" class = "panel-collapse collapse"> 
    ... 
    </div> 
</div> 
<button onclick = "HideModal()">Hide Modal</button> 

。 メニューを開いてダイアログを非表示にすると、すべてのものが消えますが、スプレッドが消えません。
この種の問題に会った人はいますか？

Answer 1

あなたの問題は、この行では、あなたの質問との私の実験では

modal.style.visibility = "hidden"; 

で、視認性の崩壊は、隠された可視性をオーバーライドします。

ソリューション 変更HideModal（）コンテンツ

$('#myModal').addClass("hidden"); 

Answer 2

倒壊させたいdivに崩壊クラスを適用する必要があります。

<div id="myModal"> 
    <a data-toggle="collapse" href = "#spread" style="display:block"> 
    <span class = "caret"></span>Spread 
    </a> 
    <div class="collapse" id="spread"> 
    ... 
    </div> 
    <button>Hide Modal</button> 
</div> 

a{display:block}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
    <div id="myModal"> 
 
     <a data-toggle="collapse" href = "#spread"> 
 
     <span class = "caret"></span>Spread 
 
     </a> 
 
     <div class="collapse" id="spread"> 
 
     ... 
 
     </div> 
 
     <button>Hide Modal</button> 
 
    </div> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>