Допомога у програмуванні, відповіді на питання / Javascript / Увімкнення спадних кнопок за допомогою Zurb Foundation 5 - за допомогою sass mixins - javascript, html, sass, zurb-foundation, mixins

Увімкнення спадних кнопок за допомогою Zurb Foundation 5 - за допомогою sass mixins - javascript, html, sass, zurb-foundation, mixins

Я хочу додати випадаючу кнопку на моєму веб-сайтівикористовуючи 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>

Ось моя SCS:

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

Ось моя установка javascript: (наприкінці мого html-файлу перед тегом closing body, крім 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>

Єдиний порядок, який я отримую з цим кодом, - цекнопка стилізована за основу, але при її натисканні немає випадаючих варіантів. Будь ласка, дайте мені знати, що я роблю неправильно, і я можу виправити цю проблему для простої спадної кнопки.

Заздалегідь спасибі.

Відповіді:

1 для відповіді № 1

Вам потрібно включити всі необхідні js-файли. Від Документи фонду:

Переконайтеся 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>