0

Foundation 6 を使用したことはなく、それを基に Web サイト全体を構築した後も、トップバーのドロップダウン メニューのリンクが機能しないことに気付きました。私はどこでもこの質問に対する答えを探しましたが、非常に多くの異なる答えを見てきました. より新しいバージョンのfoundation.min.jsをダウンロードするように言う人もいれば、より新しいバージョンのfoundation.topbar.jsをダウンロードするように言う人もいれば、この問題を解決できないと考える人もいます。

以下はコードの一部です (私のウェブサイトはhttp://littleeeternities.comにありますので、リンクが「機能していない」ことの意味を自分の目で確かめてください)。

トップバー コード

    <!--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() {

});

これを修正するためにこれまであらゆる方法を試してきましたが、今は立ち往生しています。どんな答えでも大歓迎です！:)

4

1 に答える 1

2

いくつかの問題があるようです：

  1. あなたの中で、内側app.jsに移動します。$(document).foundation();$(document).ready(function(){});

  2. Uncaught TypeError: $(...).owlCarousel is not a functionから開始されていることを解決app.jsします。使用していない場合は、owl-carousel プラグインを追加するか、このコードにコメントしてください。

  3. foundation.js(通常) または(縮小) のいずれかを使用foundation.min.jsしますが、同じ場合は両方を使用しないでください。

  4. プラグインを 1 つずつ削除してみて、最初にどのプラグインがナビゲーションに問題を引き起こしているかを特定します。

  5. 使用するプラグインの順序に問題があるようです。次のように並べ替え
    ます。jquery.js、ii。what-input.js、ｉｉｉ．foundation.min.js、iv。foundation.topbar.js、foundation.offcanvas.js ｖ．ｖｉ．app.js

  6. あなたのコメントによると、問題があり、 foundation.jsfoundation.jsから最新のものを取得することで解決しました。

于 2015-12-28T06:06:20.793 に答える