JQuery if заявление, основанное на ширине

0

Я пытаюсь создать меню, которое открывается и немного закрывается.

Если меню шириной 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");
            });
  • 1
    Ваша строка if (".sidebar").css("width") == "10%" не является правильным JavaScript для начала, и вы хотите иметь функцию 1 click которая проверяет ширину, а не различные функции щелчка в зависимости от ширины.
  • 0
    @funkwurm Я не уверен в правильном способе справиться с этим тогда. Так что-то вроде click -> если div = 10%, то еще, если div = 20%?
Показать ещё 1 комментарий
Теги:

2 ответа

0

Как бы то ни было, у вас есть 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');

    }

});
  • 0
    Работает, чтобы свернуть, но не раскрывать меню снова. Я не достаточно хорошо понимаю jQuery, чтобы понять, что здесь происходит.
  • 0
    Ваш код не будет работать, потому что вы пытаетесь получить процентное значение с помощью css('width') . css ('width') возвращает вычисленную ширину, например 400pxpx ). Лучший способ - получить width с width() (вернет просто число без px ), получить родительскую ширину, вычислить процент и использовать этот процент.
Показать ещё 1 комментарий
0

Что, если ширина не имеет значения, но вы можете достичь того же?

может иметь смысл, если вы измените 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/

  • 0
    @MichaelN это решает твою проблему?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню