Zurb Foundation 5のドロップダウンボタンを有効にする - Sass Mixinsの使用

StackOverflow https://stackoverflow.com//questions/20009473

質問

SASS MIXINSを使用して、私のウェブサイトにドロップダウンボタンを追加したいです。私はJavaScriptにドキュメントを読み、インストールに従ってください。これが私のHTML：

です 
<a href="#" data-dropdown="drop" class="login">Dropdown Button</a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>
.

これが私のSCSS：

 .login {
  @include grid-column(2);
  @include button();
  @include dropdown-button();
}
.

ここに私のJavaScriptのインストール:( MyMLファイルの上部にあるModernizr以外の閉じるhtmlファイルの終わり）

<!-- modernizr -->
<script src="/js/custom.modernizr.js"></script>

<!-- jQuery -->
<script src="/js/vendor/jquery.js"></script>

<!-- automatically loads the Foundation Core and all JavaScript plugins. -->
<script src="/js/foundation.min.js"></script>

<!-- Initialize Foundation -->
<script>
  $(document).foundation();
</script>
.

このコードで唯一の専用の基礎スタイルのボタンは、それをクリックするとドロップダウンオプションはありません。私が間違っているのか教えてください、そしてシンプルなドロップダウンボタンでこの問題を解決する方法を教えてください。

事前にありがとうございました。

役に立ちましたか？

解決

必要なすべてのJSファイルを含める必要があります。from Foundation Docs ：

続行する前に、jquery.js foundation.jsとfoundation.dropdown.jsがあなたのページに含まれていることを確認してください。たとえば、閉じる<body>タグの前に次のものを追加します。

 <!-- ... -->

<!-- your button... -->
<a href="#" data-dropdown="drop1" class="button">Dropdown Button</a><br>
<ul id="drop1" class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

<!-- ... -->

<!--
Here you should include the paths of your javascript files and initialize foundation
Add all these scripts before the closing <body> tag
-->

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- Foundation -->
<script src="js/foundation.min.js"></script>

<!-- Foundation dropdown -->
<script src="js/foundation.dropdown.min.js"></script>

<!-- Initialize Foundation -->
<script>
$(document).foundation();
</script>

</body>
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top