Не работает конструкция IF-ELSE
Здравствуйте, помоги пожалуйста, ни как не могу понять почему не работает скрипт ниже:
var menu = $('#menu_nav');
var adapMenu = $('#adap-menu');
if (window.innerWidth <= 600) {
if (menu.hasClass('show')) {
adapMenu.click(function(){
menu.removeClass('show');
}
} else {
adapMenu.click(function(){
menu.addClass('show');
}
);
}
}
|
Влад Громов,
в клике условие а ненаоборот |
Всё исправил, но функция срабатывает только один раз, то есть даёт класс show, но после повторного нажатия не удаляет, можете помочь с этим?
|
Делать адаптивное меню через jQuery - верх руко*опия просто. :)
var menu = $('#menu_nav');
var adapMenu = $('#adap-menu');
adapMenu.click(function(){
menu.toggleClass('show', window.innerWidth > 600);
});
|
Как писал рони + .toggleClass()
|
function dropmenu() {
var menu = $('#menu_nav');
var adapMenu = $('#adap-menu');
if (window.innerWidth <= 600) {
if (menu.hasClass('show')) {
menu.removeClass('show');
} else {
menu.addClass('show');
}
}
}
<li id="adap-menu" onclick="return dropmenu();"><a title="">Меню</a></li> Вот всё работает |
Влад Громов, да не нужна там эта конструкция из условий, вот:
menu.toggleClass('show', window.innerWidth > 600);
|
Вам же Ruslan_xDD прямым текстом написал как проще.
|
Ruslan_xDD,
А как сделать водругому адаптивное меню? раз вы говорите что через jquery это рукожопие |
var menu = $('#menu_nav');
var adapMenu = $('#adap-menu');
adapMenu.click(function(){
menu.toggleClass('show', window.innerWidth > 600);
});
так не работает ваша конструкция |
111
|
Цитата:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.red {
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
//зачем объект в переменную, а затем на него обработчик?
//если надо для дальнейшего использования, то можно кешировать сразу
var o = $('#my').click(function() {
o.toggleClass('red', window.innerWidth >= 600)
})
});
</script>
</head>
<body>
<div id="my">GO</div>
</body>
</html>
|
Возможно меня немного не поняли, я хочу сделать как у бутстрепа, на экранах от 600 и меньше, вместо навбара появляется кнопка меню, нажимаем на неё и раскрывается меню, нажимаем ещё раз и оно закрывается
|
|
Цитата:
@media all and (max-width: 600px) {
/*Стили для экрана <= 600*/
#adap-menu {
}
}
|
Цитата:
|
Ruslan_xDD,
Не получится без использование js сделать открытие и закрытие меню, jquery используется как раз для этого, а не для адаптивности. laimas, Зачем мне весь бутстреп? когда мне только нужен функцианал менюшки как у бутстрепа, иногда легче написать чем вырезать откуданибудь |
Цитата:
Почитайте для интересу: http://shpargalkablog.ru/2010/12/shirina-saita-css.html http://habrahabr.ru/post/119127/ |
| Часовой пояс GMT +3, время: 15:19. |