Web アプリケーションで Twitter Bootstrap レスポンシブ CSS を使用しています。これは、MustacheJS を使用した HTML テンプレートで使用されています。
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#divInsurerList" data-toggle="collapse" href="#collapseOne{{_id}}">
<span rel="tooltip" title="DELETE"><label id="insDeleteView" class="icon-trash"></label></span>
<span rel="tooltip" title="EDIT"><label id="insUpdateView" class="icon-edit"></label></span>
<divclass="" style="display: table-cell">{{Name}}</div>
</a>
</div>
<div id="collapseOne{{_id}}" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span2">Name</div>
{{#isEdit}}<div class="span8"><input id="Name" class="span12" type="text" value=" {{Name}}" /><label id="updateins"></label></div> <div class="span1"><sup style="color: #a5072e"><b>*</b></sup></div><br />{{/isEdit}}
{{^isEdit}}<div class="name span9">{{Name}}</div>
<br />{{/isEdit}}
</div>
{{#isEdit}}<button id="insSaveView" class="btn btn-primary">Save</button>
<button id="insCancel" class="btn">Cancel</button>{{/isEdit}}
</div>
</div>
これらの各アイコンをクリックすると、DELETEおよびEDITアイコンが表示さ<div class="accordion-heading">れます。deleteTemplate または editTemplate のいずれかが読み込まれ、アコーディオンが展開されます。これ <div id="collapseOne{{_id}}" class="accordion-body collapse" style="height: 0px; ">
は <div id="collapseOne{{_id}}" class="accordion-body in collapse" style="height: auto; ">
(class "in" と height:auto) になり、これは chrome と firefox で正常に動作します。問題は IE にあります。
それは、アコーディオンのEDITアイコンのコンテンツをクリックすると、「開く」ではありません
折りたたみは最初にIEで壊れていましたが、示されているようにブートストラップCssを変更することで修正しました
.collapse {
position: relative;
height: 0;
overflow: hidden;
//overflow: visible \9;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
EDITアイコンの「クリック」でアコーディオンが機能しない理由を誰にも言えますか?