时间戳

首页 > 解决方案 > How can I get the functionality I need for both my Navbar and Accordion collapsible to work correctly?

html - How can I get the functionality I need for both my Navbar and Accordion collapsible to work correctly?

问题描述

I've just started to teach myself some basic web design and have been trying to use Bootstrap 3.

I've been having issues with my navbar and accordion that seem to be based on the order of my CDN imports. I'm trying to include all imports I need in my navbar/header section so I don't need a >head< section on my other pages.

When I put them in the order I see in every thread I've come across they are in this order.

<script src = ...jquery/3.3.1/jquery.min.js"></script>
<script src = ...maxcdn../3.3.7/js/bootstrap.min.js"</script>

With this order my responsive navbar breaks and my hamburger menu no longer works but the accordion collapsible works fine. I understand that bootstrap needs to have jquery loaded first to use some of its features however in order to get my navbar to work I have to switch the two lines above. I believe that this is an issue stemming from the code of my navbar but have not been able to pinpoint the problem.

You can see the broken navbar here: Broken Navbar/Hamburger menu

Here is my Navbar code:

<!DOCTYPE html>
<html>
<head> <!--Import needed CDN stuff-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
 href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.7.0/css/font-awesome.min.css">
 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

 <script
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 </script>

  <style>

  body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
      }

.topnav {
  overflow: hidden;
  background-color: yellow;
  width: 100%;
        }

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: red;
  color: black;
}

.active {
  background-color: yellow;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
   float: right;
   display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>
<div class="container-fluid">
        <div class="topnav" data-spy="affix" data-offset-top="0" 
                id="myTopnav">
<a href="http://cabins.cannondam.net/" data-toggle="tooltip" 
title="Click here for information on Cannon Dam Cabins" 
class="active">Cabins</a>
                <a href="#Store">Store</a>
                <a href="#FAQ">FAQ</a> <!--FAQ section with Accordian: 
Cabins FAQ, Store FAQ,-->
                <a href="#Contact">Contact</a>
                <a href="javascript:void(0);" class="icon" 
onclick="myFunction()">
                <i class="fa fa-bars"></i>
                </a>
        </div>
    </div>
<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

</body>
</html>

Any help or tips to improve would be great!

标签： htmlcsstwitter-bootstrap-3

解决方案

如果您使用引导程序，则不需要媒体查询和 JS，class="navbar-toggle" 自己完成。看看这段代码，也许它会对你有所帮助：

<!DOCTYPE html>
<html>
<head> 
        <!--Meta-->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        <!----Style---->

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!----Script---->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>

  body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
      }
a{
    width: 100%;
    color: black;
}

.icon-bar{
    background-color:black;
}

.topnav {
  overflow: hidden;
  background-color: yellow;
  width: 100%;
        }

.topnav a{
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: red;
  color: black;
}

.active {
  background-color: yellow;
}

.topnav .icon {
  display: none;
}
</style>
</head>
<body>

    <nav class="navbar navbar-fixed-top" id="navbar_home">
                        <div class="topnav navbar-header">
                            <button type="button" id="nav-icon2" class="navbar-toggle" data-toggle="collapse" data-target="#myTopnav">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>                       
                            </button>
                        </div>
                        <div class="topnav collapse navbar-collapse" id="myTopnav">
                            <ul class="nav navbar-nav navbar-center">
                                <li><a href="http://cabins.cannondam.net/" data-toggle="tooltip" title="Click here for information on Cannon Dam Cabins"  class="active">Cabins</a></li>
                                <li> <a href="#Store">Store</a></li>
                                <li><a href="#FAQ">FAQ</a></li>
                                <li><a href="#Contact">Contact</a></li>
                            </ul>
                        </div>
    </nav>

</body>
</html>

推荐阅读