Twitter Bootstrap崩潰菜單不工作

我在這裏有點迷路，主要是因爲我不知道jquery，但我試圖使用bootstraps崩潰jquery插件來獲得移動第一個菜單工作。我沒有使用bootstraps css，我需要使用它嗎？是否有可能只使用jQuery插件沒有任何引導CSS？當我按下三欄菜單圖標時，什麼也沒有發生。我的css目前正在隱藏和揭示三欄菜單圖標 - 我不知道這是否與jquery中的任何內容競爭。Twitter Bootstrap崩潰菜單不工作

<body> 
    <section class="grid sticky"> 
     <div class="container"> 
      <header class="grid twelve header"> 
       <a href="#" class="menuButton btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <div class="iconBar"></div> 
        <div class="iconBar"></div> 
        <div class="iconBar"></div> 
       </a> 
       <div class="logoHolder"> 
        <a class="logo" href="index.html"> 
         <img src="img/logo/ks_logo.svg"> 
        </a> 
       </div> 
       <!-- Main Nav, hidden below 768 px --> 

       <nav class="mainNav not-phone not-phoneSM"> 
        <ul class="nav"> 
         <li><a href="work.html">Work</a></li> 
         <li><a href="about.html">About</a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 
    </section> 
    <!-- Mobile Main Nav, called upon to relieve when screen is at 768 px --> 
    <section class="not-desktop not-tablet"> 
      <header> 
       <nav class="mobileMainNav nav-collapse collapse"> 
        <ul> 
         <li><a href="work.html">Work</a></li> 
         <li><a href="about.html">About</a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </nav> 
      </header> 
    </section> 


    <!-- jQuery via Google + local fallback, see h5bp.com --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


    <!-- Bootstrap jQuery Plugins, compiled and minified --> 
    <script src="bootstrap2/js/bootstrap.min.js"></script> 
</body>

來源

2013-03-01 Ken

<！ - jQuery via Google + local fallback，請參閱h5bp.com - > <！ - 引導jQuery插件，編譯的和縮小的 - > \t \t \t – Ken 2013-03-01 01:13:07

– Ken 2013-03-01 01:14:12

– Ken 2013-03-01 01:14:59

好友的來源有在其中使用下拉JS工作引導的css文件樣式類。因此，無論是爲他們編寫自定義樣式，還是使用默認樣式。很少有我下面提的是：

.navbar .nav > li > .dropdown-menu:after { 

     } 
    .navbar .nav > li > .dropdown-menu:before { 

      } 
    .dropdown-menu > li > a { 

     } 
    .dropdown-menu{ 

     } 
    .dropdown-toggle { 
    } 
    .dropdown{ 
      }

棒的dropdown類你想有下拉切換功能Li元素。

並附加dropdown-menu到ul顯示下拉菜單。

例子：

<ul class="nav"> 
     <li class="dropdown"> 
     <a data-toggle="dropdown" class="dropdown-toggle" href="#">Hom <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another</a></li> 
         <li><a href="#">Some</a></li> 
         </ul> 

     </li> 
</ul>

您可以完全重寫這些樣式，並在項目中使用它們。

來源

2013-03-01 01:56:46 Shail

呵呵，我對jquery瞭解甚少，我不確定插件是否只是從html中調用東西。 – Ken 2013-03-01 02:10:18

您可以根據需要自定義類並使用它們 – Shail 2013-03-01 02:12:40

-1

我認爲你需要在結尾處加上

<script src="bootstrap2/js/bootstrap-dropdown.js"></script>

http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js

來源

2013-03-01 01:39:43

我把dropdown.js放在最後，但不幸的是沒有工作。三個欄菜單圖標不會顯示菜單。 – Ken 2013-03-01 01:47:33

他有完整的bootstrap.min.js包括在內。 – 2013-03-01 01:50:04

Twitter Bootstrap崩潰菜單不工作

回答

相關問題