隐藏侧边栏时将内容的宽度设置为100％吗? [英] Set Content's Width to 100% when Sidebar is Hidden?

问题描述

以前，请原谅我的英语不好.

好的，这是我的直播网站: http://bleachindonesia.com/forum/

如果您注意到左侧的小X，这是一个显示/隐藏侧栏的开关. jQuery运行正常.唯一的问题是，当我隐藏侧边栏时，内容的宽度不会变宽(达到100％)/不会填充空白空间(隐藏时，侧边栏留有空白空间).

隐藏边栏时，我需要内容的宽度为100％，但要保持其平滑的动画.也许像 vBulletin论坛中的那个一样.

这是jQuery btw:

//<!--
if($.cookie("sidebarpost") == undefined) {
    $.cookie("sidebarpost", "expanded");
}
var state = $.cookie("sidebarpost");
if(state == "collapsed") {
    $('.lside').hide();
            $('.lclose').hide();
            $('.lopen').show();
}

if($.cookie("sidebarpost") == "expanded") {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    },function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    });
} else {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    },function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    });
}
//-->

我知道它有点肿，也许如果有办法将其最小化，将非常有帮助.有人可以帮忙吗?

解决方案

您可以在切换功能中调整content宽度.像这样:

$('.lside').fadeOut(400, function(){$('#content').width("98%")});

$('.lside').fadeIn(400, function(){$('#content').width("76%")});

Beforehand, pardon me for my poor English.

Ok so here's a live site I have: http://bleachindonesia.com/forum/

If you notice the little X on the left, it is a toggle to show/hide sidebar. The jQuery is working fine. The only problem is that the content's width won't get wider (to 100%) / won't fill the empty space when I hide the sidebar (the sidebar left an empty space when hidden).

I need the content's width to be 100% when the sidebar is hidden, but retaining its smooth animation. Perhaps like the one in the vBulletin forum.

Here is the jQuery btw:

//<!--
if($.cookie("sidebarpost") == undefined) {
    $.cookie("sidebarpost", "expanded");
}
var state = $.cookie("sidebarpost");
if(state == "collapsed") {
    $('.lside').hide();
            $('.lclose').hide();
            $('.lopen').show();
}

if($.cookie("sidebarpost") == "expanded") {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    },function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    });
} else {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    },function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    });
}
//-->

I know it's kind of bloated, perhaps if there is a way to minimize it, would be very helpful. Can anybody help?

解决方案

You could just adjust the content width as part of your toggle functions. Something like:

$('.lside').fadeOut(400, function(){$('#content').width("98%")});

$('.lside').fadeIn(400, function(){$('#content').width("76%")});

这篇关于隐藏侧边栏时将内容的宽度设置为100％吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！