Question

我用css创建了一个模态对话框：隐藏可见性和可见性。

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

Javascript代码

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

一切运转良好但菜单崩溃效果不佳。如果我打开菜单并隐藏对话框，所有内容都会消失，但传播不会消失是否有人遇到过这类问题？

Answer 1

您需要将折叠类应用于要折叠的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>

＆＃13;

a{display:block}

＆＃13;

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

＆＃13;

Answer 2

你的问题就在这一行

modal.style.visibility = "hidden";

在我的问题实验中，可见性展开会覆盖隐藏的可见性。

<强>解决方案将 HideModal（）内容更改为

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

对话框隐藏后，崩溃蔓延不会消失

2 个答案: