javascript - 二级菜单问题

问题描述

问 题

当我点击一级菜单时，二级就特别快的闪过一下，点第二次才能正常出现二级菜单。

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');
            })
     })

解决方案

样式冲突

 <div id="collapseFive" class="panel-collapse collapse in" style="display:none;">

.collapse本身就具有display: none;样式，不用多此一举，另外把class为in的去掉，因为他会显示#collapseFive这个div
代码使用Bootstrap的话，设置了data-toggle="collapse"这个属性，就没必要加你写的js了

这篇关于javascript - 二级菜单问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！