Question

我正在尝试创建一个可以轻微打开和关闭的菜单。

如果菜单宽度为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");
            });

Answer 1

目前，如果宽度为10％，则您有2个点击事件绑定到$('.icon-menu')。此外，＆＃39;可见＆＃39;不是CSS元素display的有效选项 - 我相信您的实例，您想要阻止＆＃39;阻止＆＃39;

这里是代码，略有重新考虑：

$('.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');

    }

});

Answer 2

如果宽度无关紧要怎么办，但是你可以做到同样的事情呢？

如果将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/

JQuery if语句基于宽度

2 个答案: