【问题标题】:bootstrap menu toggle first click not working properly引导菜单切换第一次单击无法正常工作
【发布时间】:2013-02-18 12:33:41
【问题描述】:

我正在使用 bootstrap-collapse.js v2.3.0,但出于某种原因,第一次单击时菜单只是出现并且不会向下滑动。 我还注意到高度没有说auto,它说205px。我没有在 CSS 中的任何地方将菜单设置为这个高度。 第一次点击后,当我关闭它时,一切看起来都很完美,高度在 0 和 auto 之间切换,并且有一个平滑的过渡,而不是立即出现。

我不确定要包含哪些代码,因为这似乎是问题所在的引导切换, 但是这里是html... 我删除了无关紧要的代码..

<div class="navbar">
 <div class="navbar-inner">

              <a data-target=".nav-collapse" data-toggle="collapse" class="brand visible-phone">
    Categories
  </a>
        <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
  <div class="nav-collapse">
     <ul class="nav">
        <li> //more code </li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">//more code<<b class="caret"></b></a>



         <ul class="dropdown-menu" >

            <li>//code</li>
              <ul>

                        <li>//code</li>

              </ul>

         </ul>

    </li>

    <li>//code</li>

但这里是网站的链接...

http://bc_mobile.hailstormcommerce.com/

【问题讨论】:

  • 我建议切换到最新的 2.3.0 .. 大多数问题都会得到解决
  • 谢谢,我只是这样做了,但不幸的是没有任何改善
  • 请将您所有的 javascript 文件放在页脚中。这将有助于更快地加载页面。其次,tabs.js 文件 ..bootstrap 已经在主 js 中包含了 tabs.js
  • 我遇到了同样的问题。解决方案是this post 的公认答案

标签: javascript css twitter-bootstrap responsive-design


【解决方案1】:

请检查这个 jsfiddle JSfiddle for you with navigation

<div class="navbar">
<div class="navbar-inner">
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
   <i class="icon-bar"></i>
  </a>

    <a class="brand" href="">New Icon Menu</a>

    <div class="nav-collapse">
        <ul class="nav nav-pills pull-right">
            <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a>

            </li>
            <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a>

            </li>
            <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a>

            </li>
            <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a>

            </li>
        </ul>
    </div>
</div>

【讨论】:

  • 谢谢,但我不确定您通过该链接向我展示了什么
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-27
  • 2021-07-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多