单击选项卡时，将关闭幻灯片菜单

Question

以下是幻灯片菜单的简介：

http://jsfiddle.net/fh6p4/

$('#button').toggle( 
function() {
    $('#right').animate({ left: 250 }, 'slow', function() {
        $('#button').html('Close');
    });
}, 
function() {
    $('#right').animate({ left: 0 }, 'slow', function() {
        $('#button').html('Menu');
    });
}

）;

当我点击item1，item2等时，我需要关闭此菜单。这可能吗？

Answer 1

试试这个简短的jQuery片段： -

$('#button, #menu > ul > li').click(function(){
    var $this = $('#button');
    $('#right').animate({ left: ($this.html() == 'Close' ? 0 : 250) },'slow', function(){
         $this.html($this.html() == 'Close' ? 'Menu' : 'Close');
    });
});

DEMO

OR

$('#button, #menu > ul > li').click(function(){
    var left = parseInt($('#right').css('left'));
    $('#right').animate({ left: (left == 250 ? 0 : 250) },'slow', function(){
          $('#button').html( left == 250 ? 'Menu' : 'Close');
     });
});

DEMO

Answer 2

是的，这是可能的

$('#button, #menu ul li a').toggle( 
function() {
    $('#right').animate({ left: 250 }, 'slow', function() {
        $('#button').html('Close');
    });
}, 
function() {
    $('#right').animate({ left: 0 }, 'slow', function() {
        $('#button').html('Menu');
    });
});

Answer 3

单击菜单项时会捕获事件，并处理关闭菜单。

这是我的代码，你可以参考

$("#menu ul li a").click(function(){
    $('#right').animate({ left: 0 }, 'slow', function() {
    $('#button').html('Menu');
  });
});