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");
            });
4

2 回答 2

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/

于 2013-10-23T00:52:43.253 回答
0

$('.icon-menu')就目前而言，如果宽度为 10% ，您将绑定 2 个单击事件。此外， 'visible' 不是 CSS 元素显示的有效选项- 我相信在您的实例中，您想要 'block' 。

这是代码，稍作重构：

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

    }

});
于 2013-10-23T00:11:48.490 回答