单击选项卡时要关闭的幻灯片菜单

Slide menu to be closed when tab clicked

本文关键字：幻灯片 菜单 选项 单击      更新时间：2023-09-26

这里有一个幻灯片菜单：

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');
    });
}

)；

当我点击项目1、项目2等时，我需要关闭这个菜单。这可能吗？

试试这个简短的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');
    });
});

演示

或

$('#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

是的，是可能的

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

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

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

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