Dropdown-Schaltflächen mit Zurb Foundation 5 aktivieren – mit Sass-Mixins

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

Frage

Ich möchte meiner Website mithilfe von Sass-Mixins eine Dropdown-Schaltfläche hinzufügen.Ich habe die Dokumentation zu Javascript gelesen und die Installation nach bestem Wissen und Gewissen befolgt. Außerdem habe ich die Dokumentation zu den Dropdown-Schaltflächen durchgesehen.Hier ist mein 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>

Hier ist mein scss:

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

Hier meine Javascript-Installation:(am Ende meiner HTML-Datei vor dem schließenden Body-Tag, außer modernizr, das oben in meiner HTML-Datei steht)

<!-- 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>

Das einzige Ergebnis, das ich mit diesem Code bekomme, ist eine Schaltfläche im Foundation-Stil, aber wenn man darauf klickt, gibt es keine Dropdown-Optionen.Bitte lassen Sie mich wissen, was ich falsch mache und wie ich dieses Problem mit einer einfachen Dropdown-Schaltfläche beheben kann.

Dank im Voraus.

War es hilfreich?

Lösung

Sie müssen alle erforderlichen js-Dateien einschließen.Aus Stiftungsdokumente:

Stellen Sie sicher jquery.js foundation.js Und foundation.dropdown.js wurden auf Ihrer Seite eingefügt, bevor Sie fortfahren.Fügen Sie beispielsweise Folgendes vor dem Abschluss hinzu <body> Etikett:

 <!-- ... -->

<!-- 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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top