Twitter bootstrap 推特引导折叠菜单不工作_Twitter Bootstrap_Responsive Design_Collapse_Nav

Twitter bootstrap 推特引导折叠菜单不工作

twitter-bootstrap responsive-design

Twitter bootstrap 推特引导折叠菜单不工作,twitter-bootstrap,responsive-design,collapse,nav,Twitter Bootstrap,Responsive Design,Collapse,Nav,我在这里有点不知所措，主要是因为我不知道jquery，但我正在尝试使用引导折叠jquery插件来让移动第一菜单工作。我没有使用引导css，我需要使用它吗？是否可以只使用jquery插件而不使用任何引导css？当我按下三栏菜单图标时，什么也没有发生。我的css目前正在隐藏和显示三栏菜单图标——我不知道这是否与jquery中的任何内容相竞争 <body> <section class="grid sticky"> <div class="co

我在这里有点不知所措，主要是因为我不知道jquery，但我正在尝试使用引导折叠jquery插件来让移动第一菜单工作。我没有使用引导css，我需要使用它吗？是否可以只使用jquery插件而不使用任何引导css？当我按下三栏菜单图标时，什么也没有发生。我的css目前正在隐藏和显示三栏菜单图标——我不知道这是否与jquery中的任何内容相竞争

<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>

我认为您需要在末尾添加

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

Buddy的来源在bootstrap的css文件中有样式类，下拉js使用这些样式类来工作。因此，要么为它们编写自定义样式，要么使用默认样式。下面我只提几点：

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

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

          }
     .dropdown-menu > li > a {

         }
     .dropdown-menu{

         }
     .dropdown-toggle {
     }
    .dropdown{
          }

将

下拉列表

类粘贴到要具有下拉切换功能的Li元素

将

下拉菜单

连接到

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>

您可以完全重写这些样式，并在项目中使用它们。

以上是我在html文档底部使用的两个脚本。我不确定您做了什么？我将dropdown.js放在了最后，但不幸的是没有工作。三条菜单图标没有显示菜单。他包含了完整的bootstrap.min.js。哦，好吧，我对jquery知之甚少，我不确定插件是否只是从html调用内容。你可以自定义类并根据需要使用它们