Я пытаюсь создать меню, которое открывается и немного закрывается.
Если меню шириной 20%, я хочу, чтобы элементы отображались. Если меню шириной 10%, я хочу, чтобы элементы были скрыты. Кнопка меню используется для расширения и сглаживания меню. Я могу заставить меню рушиться, но я пытаюсь добавить что-нибудь, что расширяет меню в зависимости от ширины, которую он ломает.
$(".icon-menu").click(function() {
$(".sidebar").animate({
width: "10%",
}, 200 );
$(".sidebar ul").css("display", "none"),
$(".menu-heading").css("display", "none");
});
if (".sidebar").css("width") == "10%"{
$(".icon-menu").click(function() {
$(".sidebar").animate({
width: "20%",
}, 200 );
$(".sidebar ul").css("display", "visible"),
$(".menu-heading").css("display", "visible");
});
Как бы то ни было, у вас есть 2 события щелчка, привязанные к $('.icon-menu')
если ширина составляет 10%. Кроме того, "видимый" не является допустимым параметром для отображения элементов CSS - я верю в ваш экземпляр, вам нужен "блок".
Здесь код, слегка рефакторизованный:
$('.icon-menu').click(function() {
var $sidebar = $('.sidebar'),
show_menu = $sidebar.css('width') == '10%';
$sidebar.animate({
width: show_menu ? '20%' : '10%'
}, 200);
if(show_menu) {
$sidebar.find('ul').css('display', 'block'),
$('.menu-heading').css('display', 'block');
} else {
$sidebar.find('ul').css('display', 'none'),
$('.menu-heading').css('display', 'none');
}
});
css('width')
. css ('width') возвращает вычисленную ширину, например 400px
(с px
). Лучший способ - получить width с width()
(вернет просто число без px
), получить родительскую ширину, вычислить процент и использовать этот процент.
Что, если ширина не имеет значения, но вы можете достичь того же?
может иметь смысл, если вы измените jquery на что-то вроде этого
$(".icon-menu").parent().addClass('out').end().on('click', function () {
var menu = $(this).parent();
if (menu.hasClass('out')) {
menu.removeClass('out').animate({marginRight: '-10%'},200).children('.menu-heading, ul').fadeTo(200,0);
} else {
menu.addClass('out').animate({marginRight: '0%'},500).children('.menu-heading, ul').fadeTo(200,1);
}
});
Я сделал скрипку, чтобы продемонстрировать: http://jsfiddle.net/filever10/fXHtt/
if (".sidebar").css("width") == "10%"
не является правильным JavaScript для начала, и вы хотите иметь функцию 1click
которая проверяет ширину, а не различные функции щелчка в зависимости от ширины.