Jquery 展开和收缩侧边栏保持窗口宽度尺寸

Question

我有一个侧边栏，我总是希望将其设置为 1/3 窗口宽度或 2/3 窗口宽度，具体取决于用户是否单击展开按钮

我的侧边栏在浏览器展开时工作，但如果他们单击展开但仍保持窗口宽度尺寸，我需要将其更改为三分之二

问题是扩展未定义

fiddle 在这里 http://jsfiddle.net/ktcle/jPq9k/5/

$(document).ready(function() {

function checkWidth() {

    var $window = $(window);
    var windowsize = $window.width();
    var sideBarWidth = window.innerWidth / 3 * 1;
    var playerWidth = (window.innerWidth-sideBarWidth - 20);

    UpdatePlayerSize();
    UpdateSidebar();

    function UpdatePlayerSize(){
         $("#leftColumn").width(playerWidth);
     }

      function UpdateSidebar(){
         $("#sideBar").width(sideBarWidth);
     }

     function Expand()
    {
        sideBarWidth = window.innerWidth / 3 * 2;
        var sideBar = document.getElementById("sideBar");
        sideBar.style.width = sideBarWidth + "px";

        UpdatePlayerSize();
    }

    function Contract()
    {
        sideBarWidth = window.innerWidth / 3 * 1;
        var sideBar = document.getElementById("sideBar");
        sideBar.style.width = sideBarWidth + "px";

        UpdatePlayerSize();
    }
 };

checkWidth();
$(window).resize(checkWidth);
}); 

Answer 1

您正在使用在闭包外部无法访问的嵌套函数。最简单的修复方法是将 Expand 和 Contract 方法附加到 window 范围:

http://jsfiddle.net/jPq9k/8/

function checkWidth() {

    var $window = $(window);
    var windowsize = $window.width();
    var sideBarWidth = window.innerWidth / 3 * 1;
    var playerWidth = (window.innerWidth-sideBarWidth - 20);

    // ...
    // etc (removed for brevity)
    // ... 

    //Just add these two lines to the end of your checkWidth function:
    window.Expand = Expand;
    window.Contract = Contract;

};