jquery - jQuery展开和收缩侧栏，保持窗口宽度尺寸

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

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

问题是扩展未定义

小提琴在这里
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);
});

最佳答案

您正在使用无法在闭包外部访问的嵌套函数。最简单的解决方法是将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;

};

关于jquery - jQuery展开和收缩侧栏，保持窗口宽度尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23494732/