当我点击一级菜单时,二级就特别快的闪过一下,点第二次才能正常出现二级菜单。
div代码:
<li>
<a data-toggle="collapse" class="fapiao" data-parent="#accordion" href="#collapseFive">
<p class="title">1<span class="check-y-jt-box">ee<img src="images/iconfont-jiantou.png"></span></p>
</a>
<div id="collapseFive" class="panel-collapse collapse in" style="display:none;">
<input name="inv_payee" type="text" class="input check-y-box-input" placeholder="134343" autocomplete="off">
</div>
</li>
<li>
<div class="ect-margin-tb ect-padding-lr checkout-select-1">
<a data-toggle="collapse" class="liuyan" data-parent="#accordion" href="#collapseFive2">
<p class="title">2<span class="check-y-jt-box"><img src="images/iconfont-jiantou.png"></span></p>
</a>
<div id="collapseFive2" class="panel-collapse collapse in" style="display:none;">
<input name="postscript" type="text" class=" input check-y-box-input" placeholder="fdgsfdgf!" autocomplete="off">
</div>
</div>
</li>
js代码:
$(function(){
$(".fapiao").click(function() {
$("#collapseFive").css('display', 'block');
})
$(".liuyan").click(function() {
$("#collapseFive2").css('display', 'block');
})
})
样式冲突
.collapse
本身就具有display: none;
样式,不用多此一举,另外把class为in
的去掉,因为他会显示#collapseFive
这个div代码使用Bootstrap的话,设置了
data-toggle="collapse"
这个属性,就没必要加你写的js了