引導導航欄切換不開放

我一直在試圖讓導航欄崩潰打開和關閉，但它不工作。我已經確定我在bootstrap.min.js之前包含了jQuery。我不知道還有什麼可以看的。引導導航欄切換不開放

的index.html

{% extends "home/base.html" %} 
{% load staticfiles %} 


{% block header %} 


{% endblock %} 


{% block content %} 

<div class="wrapper"> 
    <!--=== Header v6 ===--> 
    <div class="header-v6 header-white-transparent header-sticky"> 
     <!-- Navbar --> 
     <div class="navbar mega-menu" role="navigation"> 
      <div class="container"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="menu-container"> 
        <button type='button' class='navbar-toggle' data-toggle='dropdown' data-target='#myNavbar'> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 

        <!-- Navbar Brand --> 
        <div class="navbar-brand"> 
         <a href=""> 
          <img class="default-logo" src="assets/img/logo3-light.png" alt="Logo"> 
          <img class="shrink-logo" src="assets/img/logo3-dark.png" alt="Logo"> 
         </a> 
        </div> 
        <!-- ENd Navbar Brand --> 

        <!-- Header Inner Right --> 
        <div class="header-inner-right"> 
         <ul class="menu-icons-list"> 
          <li class="menu-icons"> 
           <i class="menu-icons-style search search-close search-btn fa fa-search"></i> 
           <div class="search-open"> 
            <input type="text" class="animated fadeIn form-control" placeholder="Start searching ..."> 
           </div> 
          </li> 
         </ul> 
        </div> 
        <!-- End Header Inner Right --> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="myNavbar"> 
        <div class="menu-container"> 
         <ul class="nav navbar-nav"> 
          <!-- Home --> 
          <li class="dropdown active"> 
           <a href="/">Home</a> 
          </li> 
          <!-- End Home --> 
          <!-- Home --> 
          <li> 
           <a href="about" class="dropdown active">About Us</a> 
          </li> 
          <!-- End Home --> 
          <!-- Home --> 
          <li> 
           <a href="/" class="dropdown active">Rockets</a> 
          </li> 
          <!-- End Home --> 
          <!-- Home --> 
          <li> 
           <a href="/" class="dropdown active">Ballistics</a> 
          </li> 
          <!-- End Home --> 
          <!-- Home --> 
          <li> 
           <a href="/" class="dropdown active">Space</a> 
          </li> 
          <!-- End Home --> 
         </ul> 
        </div> 
       </div><!--/navbar-collapse--> 
      </div> 
     </div> 
     <!-- End Navbar --> 
    </div> 
    <!--=== End Header v6 ===--> 

    <!-- Interactive Slider v2 --> 
    <div class="interactive-slider-v2 img-v4"> 
     <div class="container"> 
      <h1>Test Splash</h1> 
      <p>Fully responsive test template.</p> 
     </div> 
    </div> 
    <!-- End Interactive Slider v2 --> 

    <!--=== Content ===--> 
    <div class="content-md"> 
     <div class="container"> 
      <!-- Service Box --> 
      <div class="row text-center margin-bottom-60"> 
       <div class="col-md-4 md-margin-bottom-50"> 
        <img class="image-md margin-bottom-20" src="assets/img/icons/flat/01.png" alt=""> 
        <h1 class="title-v3-md margin-bottom-10">Fully Responsive</h1> 
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p> 
       </div> 
       <div class="col-md-4 flat-service md-margin-bottom-50"> 
        <img class="image-md margin-bottom-20" src="assets/img/icons/flat/02.png" alt=""> 
        <h2 class="title-v3-md margin-bottom-10">HTML5 + CSS3</h2> 
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p> 
       </div> 
       <div class="col-md-4 flat-service"> 
        <img class="image-md margin-bottom-20" src="assets/img/icons/flat/03.png" alt=""> 
        <h2 class="title-v3-md margin-bottom-10">Launch Ready</h2> 
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p> 
       </div> 
      </div> 
      <!-- End Service Box --> 
     </div><!--/container --> 



        <!-- Link List --> 
        <div class="col-md-3 md-margin-bottom-40"> 
         <div class="headline"><h2>Useful Links</h2></div> 
         <ul class="list-unstyled link-list"> 
          <li><a href="#">About us</a><i class="fa fa-angle-right"></i></li> 
          <li><a href="#">Portfolio</a><i class="fa fa-angle-right"></i></li> 
          <li><a href="#">Latest jobs</a><i class="fa fa-angle-right"></i></li> 
          <li><a href="#">Community</a><i class="fa fa-angle-right"></i></li> 
          <li><a href="#">Contact us</a><i class="fa fa-angle-right"></i></li> 
         </ul> 
        </div><!--/col-md-3--> 
        <!-- End Link List --> 

        <!-- Address --> 
        <div class="col-md-3 map-img md-margin-bottom-40"> 
         <div class="headline"><h2>Contact Us</h2></div> 
         <address class="md-margin-bottom-40"> 
          25, Lorem Lis Street, Orange <br /> 
          California, US <br /> 
          Phone: 800 123 3456 <br /> 
          Fax: 800 123 3456 <br /> 
          Email: <a href="mailto:[email protected]" class="">[email protected]</a> 
         </address> 
        </div><!--/col-md-3--> 
        <!-- End Address --> 
       </div> 
      </div> 

      <div class="copyright"> 
       <div class="container"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <p> 
          2015 &copy; All Rights Reserved. 
          <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> 
         </p> 
        </div> 

        <!-- Social Links --> 
        <div class="col-md-6"> 
         <ul class="footer-socials list-inline"> 
          <li> 
           <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook"> 
            <i class="fa fa-facebook"></i> 
           </a> 
          </li> 
          <li> 
           <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Skype"> 
            <i class="fa fa-skype"></i> 
           </a> 
          </li> 
          <li> 
           <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus"> 
            <i class="fa fa-google-plus"></i> 
           </a> 
          </li> 
          <li> 
           <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Linkedin"> 
            <i class="fa fa-linkedin"></i> 
           </a> 
          </li> 
          <li> 
           <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Pinterest"> 
            <i class="fa fa-pinterest"></i> 
           </a> 
          </li> 
          <li> 
           <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter"> 
            <i class="fa fa-twitter"></i> 
           </a> 
          </li> 
          <li> 
           <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dribbble"> 
            <i class="fa fa-dribbble"></i> 
           </a> 
          </li> 
         </ul> 
        </div> 
        <!-- End Social Links --> 
       </div> 
      </div> 
     </div><!--/copyright--> 

{% endblock %} 

{% block js_dependencies %} 
{% endblock %}

base.html文件

{% load staticfiles %} 
<html> 
    <head> 
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" 
      rel="stylesheet" media="screen"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Favicon --> 
    <link rel="shortcut icon" href="favicon.ico"> 

    <!-- Web Fonts --> 
    <link rel='stylesheet' type='text/css' href='http//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'> 

    <!-- CSS Global Compulsory --> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/style.css' %}"> 

    <!-- CSS Header and Footer --> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/header.css' %}"> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/footer.css' %}"> 

    <!-- CSS Implementing Plugins --> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/animate.css' %}"> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/line-icons.css' %}"> 
    <link rel="stylesheet" href="{% static 'bootstrap/fonts/font-awesome/cssfont-awesome.min.css' %}"> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/cubeportfolio.min.css' %}"> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/custom-cubeportfolio.css' %}"> 

    <!-- CSS Pages Style --> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/page-one.css' %}"> 

    <!-- CSS Theme --> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/default.css' %}" id="style_color"> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/dark.css' %}"> 
    <!-- CSS Implementing Plugins --> 
     <link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/animate.css' %}"> 
     <link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/line-icons.css' %}"> 
     <link rel="stylesheet" type='text/css' href="{% static 'bootstrap/fonts/font-awesome/css/font-awesome.min.css' %}"> 
     <link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/parallax.css' %}"> 
     <link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/jquery.fancybox.css' %}"> 
     <link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/owl.carousel.css' %}"> 


     <!-- CSS Customization --> 
     <link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/custom.css' %}"> 

    <!-- Web Fonts --> 
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 

    <!-- CSS Customization --> 
    <link rel="stylesheet" href="{% static 'bootstrap/css/_Home/custom.css' %}"> 

    {% block header %} {% endblock %} 

    </head> 

    <body> 

    {% block content %} {% endblock %} 

    {% block js_dependencies %} 
     <!-- JS Global Compulsory --> 
     <script type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/jquery-migrate.min.js' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script> 
     <!-- JS Implementing Plugins --> 
     <script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/back-to-top.js' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/smoothScroll.js' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.parallax.js' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/waypoints.min.js' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.counterup.min.js' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.cubeportfolio.min.js' %}"></script> 
     <!-- JS Customization --> 
     <script type="text/javascript" src="{% static 'bootstrap/js/_Home/custom.js' %}"></script> 
     <!-- JS Page Level --> 
     <script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/app.css' %}"></script> 
     <script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/cube-portfolio-3.js' %}"></script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function() { 
       App.init(); 
       App.initCounter(); 
       App.initParallaxBg(); 
      }); 
     </script> 

    {% endblock %} 

    </body> 

</html>

來源

2016-01-29 thai

你有一些重複的CSS進口（'animate.css'，'線icons.css'），看起來像一個破碎的進口（'引導/字體/字體真棒/ cssfont-awesome.min .css'），所有的下拉菜單都有「'active」「類（不應該）。如果你清理了一下，就會更容易分辨出問題所在。 – Franey

你有你的代碼中的一些錯誤。看到這個例子摺疊導航欄

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header">   
      <a class="navbar-brand" href="#">WebSiteName</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Page 1-1</a></li> 
         <li><a href="#">Page 1-2</a></li> 
         <li><a href="#">Page 1-3</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-in">  </ul> 
     </div> 
    </div> 
</nav>

來源

2016-01-29 20:49:58

已正確顯示的引導導航欄，但它沒有得到點擊（漢堡菜單），是你的意思？

來源

2016-02-01 10:05:28

引導導航欄切換不開放

回答

相關問題