如何修复顶部栏下拉菜单链接在 Foundation 6 中不起作用
How to fix topbar dropdown menu links not working in Foundation 6
我从来没有使用过 Foundation 6,在其上构建整个网站之前和之后,我意识到我的顶部栏下拉菜单中的链接不起作用。我到处寻找这个问题的答案,我看到了很多不同的答案。有人说下载新版foundation.min.js,有人说下载新版foundation.topbar.js,还有人认为这个问题无法解决。
下面是一些代码(我的网站可以在 http://littleeternities.com 找到,这样你就可以自己明白我所说的链接不是 "working" 的意思)。
顶部条码
<!--Navigation-->
<div class="title-bar" data-responsive-toggle="main-menu" data-hide- for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
<a href="#">About</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Services</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Pricing</a></li>
<li><a href="#">Custom Blog Design</a></li>
<li><a href="#">Custom Web Design</a></li>
<li><a href="#">Pre-Made Templates</a></li>
<li><a href="#">Branding Packages</a></li>
<li><a href="#">Web-Hosting</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Courses</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Perfect Your Business Plan</a></li>
<li><a href="#">Kickstart Your Badass Online Business</a></li>
<li><a href="#">Digital Innovator</a></li>
<li><a href="#">More Courses</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Free</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Kickstart Your Badass Business Checklist</a></li>
<li><a href="#">FREE Course: Build a Better Business in 7 Days</a></li>
<li><a href="#">Business Brainstorming Workbook</a></li>
<li><a href="#/">8 Business Tools to Use</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- /navigation -->
这是添加的脚本
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/what-input/what-input.js"></script>
<script src="../bower_components/foundation-sites/dist/foundation.js"></script>
<script src="../js/app.js"></script>
<script src="../bower_components/foundation-sites/dist/foundation.min.js"></script>
<script src="../js/foundation.topbar.js"></script>
<script src="../bower_components/foundation-sites/js/foundation.offcanvas.js"></script>
在文件app.js中写入了下面的JavaScript
$(document).foundation();
$(document).ready(function() {
});
到目前为止,我已经尝试了所有方法来解决这个问题,但现在我被卡住了。任何答案将不胜感激! :)
似乎有几个问题:
在你app.js
里面,把$(document).foundation();
移到$(document).ready(function(){});
里面。
解决 Uncaught TypeError: $(...).owlCarousel is not a function
从 app.js
启动的问题,添加 owl-carousel 插件或评论此代码,如果您不使用。
使用 foundation.js
(正常)或 foundation.min.js
(缩小),但如果它们相同则不要同时使用。
尝试一次删除一个插件,首先确定是哪个插件导致了导航问题。
使用的插件顺序似乎有问题。重新排列为
一世。 jquery.js
,
二. what-input.js
,
三. foundation.min.js
,
四. foundation.topbar.js
,
五、foundation.offcanvas.js
六. app.js
根据您的评论,问题出在 foundation.js
并从 foundation.js 获取最新的解决了它。
我从来没有使用过 Foundation 6,在其上构建整个网站之前和之后,我意识到我的顶部栏下拉菜单中的链接不起作用。我到处寻找这个问题的答案,我看到了很多不同的答案。有人说下载新版foundation.min.js,有人说下载新版foundation.topbar.js,还有人认为这个问题无法解决。
下面是一些代码(我的网站可以在 http://littleeternities.com 找到,这样你就可以自己明白我所说的链接不是 "working" 的意思)。
顶部条码
<!--Navigation-->
<div class="title-bar" data-responsive-toggle="main-menu" data-hide- for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
<a href="#">About</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Services</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Pricing</a></li>
<li><a href="#">Custom Blog Design</a></li>
<li><a href="#">Custom Web Design</a></li>
<li><a href="#">Pre-Made Templates</a></li>
<li><a href="#">Branding Packages</a></li>
<li><a href="#">Web-Hosting</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Courses</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Perfect Your Business Plan</a></li>
<li><a href="#">Kickstart Your Badass Online Business</a></li>
<li><a href="#">Digital Innovator</a></li>
<li><a href="#">More Courses</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Free</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Kickstart Your Badass Business Checklist</a></li>
<li><a href="#">FREE Course: Build a Better Business in 7 Days</a></li>
<li><a href="#">Business Brainstorming Workbook</a></li>
<li><a href="#/">8 Business Tools to Use</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- /navigation -->
这是添加的脚本
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/what-input/what-input.js"></script>
<script src="../bower_components/foundation-sites/dist/foundation.js"></script>
<script src="../js/app.js"></script>
<script src="../bower_components/foundation-sites/dist/foundation.min.js"></script>
<script src="../js/foundation.topbar.js"></script>
<script src="../bower_components/foundation-sites/js/foundation.offcanvas.js"></script>
在文件app.js中写入了下面的JavaScript
$(document).foundation();
$(document).ready(function() {
});
到目前为止,我已经尝试了所有方法来解决这个问题,但现在我被卡住了。任何答案将不胜感激! :)
似乎有几个问题:
在你
app.js
里面,把$(document).foundation();
移到$(document).ready(function(){});
里面。解决
Uncaught TypeError: $(...).owlCarousel is not a function
从app.js
启动的问题,添加 owl-carousel 插件或评论此代码,如果您不使用。使用
foundation.js
(正常)或foundation.min.js
(缩小),但如果它们相同则不要同时使用。尝试一次删除一个插件,首先确定是哪个插件导致了导航问题。
使用的插件顺序似乎有问题。重新排列为
一世。jquery.js
, 二.what-input.js
, 三.foundation.min.js
, 四.foundation.topbar.js
, 五、foundation.offcanvas.js
六.app.js
根据您的评论,问题出在
foundation.js
并从 foundation.js 获取最新的解决了它。