Bootstrap v4切換下拉菜單在本地不起作用，但在公共站點上起作用
[英]Bootstrap v4 toggle drop-down menu not working locally, but works on public site
問題描述
在今天的大部分時間里，我無法讓bootstrap v4可折疊漢堡包菜單在本地xampp服務器上工作。 奇怪的是，它可以在我的公共網站上正常工作！ 漢堡包顯示為768像素寬。 Chrome和Firefox中存在此問題。
我很茫然。 我已經梳理了類似的stackoverflow線程，但是沒有找到解決我的問題的任何東西。 我的導航欄代碼塊也與lynda.com上Bootstrap類中的導航欄示例相同。
我很了解：
我正在使用最新的最小版本的jquery，並且xampp /本地“ index.html”文檔的“ head”部分中的javascript腳本文件的順序與托管/公共服務器index.html文件中的javascript腳本文件的順序相同。 。 這可能不同也可能無關緊要：我使用CDN鏈接訪問我的公共/托管頁面的所有引導文件，並使用相對鏈接路徑訪問我的XAMPP /本地網站的計算機上的JS / CSS文件（“ htdocs ”是我的xampp設置的根文件夾）。
為了排除某些情況，我將導航條形碼塊從我的公共頁面（單擊后使漢堡包圖標擴展的代碼）復制/粘貼到了xampp上的本地index.html文件中。 不開心 我知道本地xampp服務器中javascript文件的相對文件夾路徑正確（htdocs是根文件夾，而JS文件在“ js”文件夾中）。
我還嘗試將最新版本的jQuery（3.2.1）重新下載到我的本地文件夾中，以為我正在使用的文件已損壞，但仍然沒有。 我假設漢堡菜單功能是jQuery，但也許是javascript。
最后：我在控制台上檢查了本地“ index.html”頁面，沒有任何錯誤。
那有什么呢？ 為什么我的漢堡菜單不能在本地生產服務器上運行，但在公共頁面上可以正常工作？ 它是否與通過CDN加載的javascript文件相對於我的硬盤驅動器本地加載有關？
請在下面看到我的本地生產/ xampp服務器的head和nav條形碼塊（這是無效的代碼），然后是head and nav條形碼的代碼塊（這是有效的代碼）。 我認為問題出在“ head”部分，以及如何鏈接/訪問js。
謝謝你的幫助！
<head> <meta charset="utf-8"> <meta http-equiv="X-US-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta content="text/html" http-equiv="Content-Type"/> <meta content="Steve Gladwin" name="description"/> <meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <!-- Local CSS File --> <link rel="stylesheet" type="text/css" href="/css/main.css" media="screen"> <title>Steve Gladwin</title> <!-- Bootstrap Javascript/jQuery --> <script src="/js/jquery-3.2.1.min.js"></script> <!-- Bootstrap JS Tether --> <script src="/js/tether.min.js"</script> <!-- Bootstrap JS --> <script src="/js/bootstrap.min.js"></script> </head> <body> <!-- <div class="container"> <div class="row"> <div class="col-md-12"> --> <nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;"> <!-- <div class="container"> --> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <h1 class="navbar-brand mr-auto">Steve Gladwin</h1> <!-- </div> --> <div class="collapse navbar-collapse" id="burgercollapse"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link active" href="index.html">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> <li class="nav-item"><a class="nav-link" href="#">For Fun</a></li> <li class="nav-item"><a class="nav-link" href="#">Social</a></li> </ul> </div> <!--collpase--> </nav>
<head> <meta charset="utf-8"> <meta http-equiv="X-US-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta content="text/html" http-equiv="Content-Type"/> <meta content="Steve Gladwin" name="description"/> <meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <!-- Bootstrap Javascript/jQuery --> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> --> <!-- script src="css/bootstrap-4.0.0-alpha.6-dist/tether-1.3.3/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"> </script> --> <!-- <script src="css/bootstrap-4.0.0-alpha.6-dist/js/jquery-3.2.1.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"> </script> --> <!--<script src="css/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"> </script>--> <!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> --> <!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-grid.min.css" rel="stylesheet"> <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-reboot.min.css" rel="stylesheet"> --> <link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen"> <title>Steve Gladwin</title> </head> <body> <!-- <div class="container"> <div class="row"> <div class="col-md-4"> <h2>Steve Gladwin</h2> </div> --> <!-- <div class="container"> <div class="row"> <div class="col-md-12"> --> <nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;"> <!-- <div class="container"> --> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <h1 class="navbar-brand mr-auto">Steve Gladwin</h1> <!-- </div> --> <div class="collapse navbar-collapse" id="burgercollapse"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link active" href="index.html">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> <li class="nav-item"><a class="nav-link" href="#">For Fun</a></li> <li class="nav-item"><a class="nav-link" href="#">Social</a></li> </ul> </div> <!--collpase--> </nav>
1 個解決方案
解決方案1
0 已采納 2017-08-14 00:52:54
您在第一個代碼塊上的標記格式不正確
<script src="/js/tether.min.js"</script>
您錯過了結賬>
您還可以在其他代碼塊中引用CDN，並在本地版本中引用相關文件。 確保正確引用了它們。
使用 Javascript 切換的導航欄漢堡的響應式下拉菜單適用於 Chrome、Firefox，但不適用於 Safari
[英]Responsive drop-down menu from burger of navbar using Javascript toggle works in Chrome, Firefox, but not Safari
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.