将codepen网站移植到github页面 - 折叠导航按钮不起作用

问题描述：

我最近试图将我在codepen中制作的网站移植到GitHub页面上。由于折叠的导航栏按钮似乎不适用于新网站，因此我一直在与该网站发生问题。该页面是响应等，但按钮时不做任何事情。希望得到一些帮助。 Site 将codepen网站移植到github页面 - 折叠导航按钮不起作用

不知道你想要的代码段，但这里有一些你可能需要的。

<html> 
<head> 
<title> Jacob Jones- portfolio</title> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"> 
<link rel="stylesheet" href="css/custom.css"/> 



<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
    <body> 

<!-- Navbar start --> 

<nav class="navbar navbar-custom" id="bar"> 
<div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
    <button type="btn btn-default" class="navbar-toggle collapsed btn btn-default collps" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true"> 
    <span class="sr-only"></span> 


    <i class="fa fa-bars" aria-hidden="true"></i> 

    </button> 

</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li class><a href="#about-me">About</a></li> 
    <li><a href="#skill-set">Skillset</a></li> 

    <li><a href="#projects">Portfolio</a></li> 

    </ul>

答

你忘了链接都为引导的的JavaScript代码，还有jQuery的库（其引导的JavaScript的依赖）。为了解决这个问题，下面两行添加到您的<head>（确保你以前引导的JavaScript加载jQuery库）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

注意，如果你通过HTTPS运行你的网站，你可能会得到混合内容警告。因此，你需要使用一个协议无关来源：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这将解决这个菜单的功能，足以证明如下（减去您的自定义CSS）：

<head> <title> Jacob Jones- portfolio</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>  <nav class="navbar navbar-custom" id="bar"> <div class="container-fluid">  <div class="navbar-header"> <button type="btn btn-default" class="navbar-toggle collapsed btn btn-default collps" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true"> <span class="sr-only"></span> <i class="fa fa-bars" aria-hidden="true"></i> </button> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class><a href="#about-me">About</a></li> <li><a href="#skill-set">Skillset</a></li> <li><a href="#projects">Portfolio</a></li> </ul> </div> </div> </nav> </body>

希望这有助于！ :)

仍然无法正常工作:(您是否尝试过为自己查看网站，以便我们可以否认/确认问题？ –

好了。现在解决 - 您是正确的，但事实证明您需要拥有该网站对于jquery和bootstrap正好在body标签之上让他们工作感谢您的快速反应和问题的解决 –

我的歉意;我最初并没有意识到您正在运行HTTPS，并且我给出的链接是HTTP，您需要使用协议HTTPS的无法识别的链接：'//maxcdn.bootstrapcdn.com ...'。我更新了我的代码来纠正这个问题，我很高兴听到你的工作:) –

将codepen网站移植到github页面 - 折叠导航按钮不起作用

相关推荐