代码改变世界

jQuery关闭/显示侧边栏

2013-03-03 23:58  youxin  阅读(617)  评论(0)  编辑  收藏  举报

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )

  • handler(eventObject)
    Type: Function()
    A function to execute every even time the element is clicked.
  • handler(eventObject)
    Type: Function()
    A function to execute every odd time the element is clicked.
  • handler(eventObject)
    Type: Function()
    Additional handlers to cycle through after clicks.
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);Toggle a style on table cells. (Not recommended. Use .toggleClass() instead.):
 

关闭/显示侧边栏用到了这个函数:


<li id="close-sidebar"><a>干掉侧边栏</a></li> /* 可加在导航ul标签中 */

$('#close-sidebar a').toggle(function(){ //选中id="close-sidebar"内的a标签的内容，即“干掉侧边栏”

$(this).text("显示侧边栏"); //点击此中内容后改变成“显示侧边栏”

$('#sidebar').hide(); //隐藏id="sidebar"的内容，即“侧边栏”

$('#content').animate({width: "960px"}, 1000); //让id="content"，即主体部分的宽度伸长至960px，时间为1000毫秒

},function(){

$(this).text("关闭侧边栏"); //点击此中内容后改变成“关闭侧边栏”

$('#sidebar').show(); //显示id="sidebar"的内容，即“侧边栏”

$('#content').animate({width: "705px"}, 800); //让id="content"，即主体部分的宽度缩至705px，时间为800毫秒

});