Включение выпадающих кнопок с Zurb Foundation 5 - использование sass mixins

Я хочу добавить выпадающую кнопку на свой сайт, используя Sass mixins. Я читал документы на Javascript и следил за установкой, насколько мне известно, и я просмотрел документы в раскрывающихся списках. Вот мой HTML:Включение выпадающих кнопок с Zurb Foundation 5 - использование sass mixins

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

Вот мой СКС:

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

Вот мой Javascript установка: (в конце моего HTML файла перед закрывающим тегом тела за исключением 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>

Единственного resuly я с этим кодом является основой стиля кнопки, но при нажатии на нее нет никаких вариантов выпадающих. Пожалуйста, дайте мне знать, что я делаю неправильно, и как я могу исправить эту проблему для простой кнопки выпадающего списка.

Заранее спасибо.

источник

2013-11-15 MattCamp

Перед тем, как можно использовать выпадающие вы хотите, чтобы убедиться, что оба JQuery (или Zepto) и foundation.js доступны на вашей странице. Вы можете обратиться к документации javascript по настройке этого. [Foundation Docs] (http://foundation.zurb.com/docs/components/dropdown.html) –

Создайте [JSFiddle] (http://jsfiddle.net/) с помощью скомпилированного CSS –

Вот мой скомпилированный CSS : http://jsfiddle.net/MattCamp/TLX8Q/ – MattCamp

Вам необходимо включить все необходимые файлы js. От Foundation Docs:

Убедитесь jquery.jsfoundation.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>

источник

2013-12-12 20:43:41

У меня уже есть раскрывающийся список jQuery, Foundation, Foundation и intialize в моем коде, и он по-прежнему не работает. Что вы подразумеваете под «Здесь вы должны указать пути ваших файлов javascript и инициализировать фундамент Добавьте все эти скрипты перед закрытием тега »? – MattCamp

Проверьте это [JSFiddle] (http://jsfiddle.net/TLX8Q/3/), он включает в себя ваш скомпилированный CSS и работает. Какую версию jQuery вы используете? –

Я не понимаю, почему он не работает на моем сайте. Вы добавили что-нибудь в css? – MattCamp

Включение выпадающих кнопок с Zurb Foundation 5 - использование sass mixins

ответ

Смежные вопросы