二级菜单问题

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

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');
            })
     })
阅读 2.5k
2 个回答

样式冲突

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

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

代码看起来是使用了 Bootstrap 的 Collapse 组件:

如果是这样的话,那么尝试引入 Bootstrap 相关组件 Css, Js 文件,移除你自己的 Js。

如果不是的话,你自己的 Js 实现虽然不是很好,但没有你所说的问题。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题