Javascript JQuery侧栏在此JSFIDLE中不起作用

此JSFIDLE中的侧栏（来自）工作不正常。应该是侧边栏的div只显示在页面上（默认情况下应该是隐藏的）。因此，边栏小部件似乎没有正确连接到div，但是我已经检查过了，边栏出现在元素上，即

$（“.sidebar.right”）.sidebar（）.length=1

。甚至会调用侧栏的“close”方法，但是表示侧栏的div并没有隐藏

在我的实际代码中，我使用的是Jquery 2.1.4

/*！
*jQuery边栏插件
*  ---------------------
*一个愚蠢的简单工具条jQuery插件。
*
*与1）一起开发{
返回self.each（函数（）{
$（此）.sidebar（选项）；
});
}
//宽度、高度
var width=self.outerWidth（）；
var height=self.outerHeight（）；
//默认值
变量设置=$.extend({
//动画速度
速度:200,，
//侧面：左|右|上|下
侧面：“左”，
//关门了
isClosed:错误，
//我应该关闭侧边栏吗？
接近：对
}，选项）；
/*!
*打开侧边栏
*$（[jQuery选择器]）.trigger（“侧栏：打开”）；
* */
打开（“侧栏：打开”，功能（ev，数据）{
var属性={}；
属性[settings.side]=0；
settings.isClosed=null；
self.stop（）.animate（属性，$.extend（{}，设置，数据）。速度，函数（）{
settings.isClosed=false；
自我触发（“侧栏：打开”）；
});
});
/*!
*关闭侧边栏
*$（“[jQuery选择器]）.trigger（“侧栏：关闭”）；
* */
打开（“侧栏：关闭”，函数（ev，数据）{
var属性={}；
如果（settings.side==“left”| | settings.side==“right”）{
属性[settings.side]=-self.outerWidth（）；
}否则{
属性[settings.side]=-self.outerHeight（）；
}
settings.isClosed=null；
self.stop（）.animate（属性，$.extend（{}，设置，数据）。速度，函数（）{
settings.isClosed=true；
自触发（“侧栏：关闭”）；
});
});
/*!
*切换侧边栏
*$（“[jQuery选择器]）.trigger（“边栏：切换”）；
* */
打开（“侧栏：切换”），功能（ev，数据）{
if（settings.isClosed）{
触发器（“侧栏：打开，[数据]）；
}否则{
self.trigger（“侧栏：关闭，[data]）；
}
});
函数closeWithNoAnimation（）{
self.trigger（“侧边栏：关闭”[{
速度：0
}]);
}
//关闭侧边栏
如果（！settings.isclose&&settings.close）{
关闭，无动画（）；
}
$（窗口）.on（“调整大小”，函数（）{
如果（！settings.isClosed）{
返回；
}
关闭，无动画（）；
});
self.data（“侧栏”，设置）；
回归自我；
};
//版本
$.fn.sidebar.version=“3.3.2”；
})（jQuery）

我在右边！
$（函数（）{
$（“.sidebar.right”）.sidebar({
一方：“对”
});
});

包含jquery
包括css
JSFIDLE在window.onload中运行脚本，因此html中的js代码将在它之前运行。你应该推迟运行它

setTimeout(function(){  
    $(".sidebar.right").sidebar({ side: "right" }).trigger("sidebar:open");  
},2000);


固定版本：（
setTimeout
不是一个好方法，只是一个演示）
在github页面的演示中，他们有一个演示链接到的handlers.js文件。这将处理边栏的启动和打开。你只需要将它添加到你的页面或演示中。您还需要添加一点css

这里是一个更新的演示

下面是handlers.js。只需将其放在sidebar.js文件之后

$(document).ready(function () {
    // All sides
    var sides = ["left", "top", "right", "bottom"];

    // Initialize sidebars
    for (var i = 0; i < sides.length; ++i) {
        var cSide = sides[i];
        $(".sidebar." + cSide).sidebar({side: cSide});
    }

    // Click handlers
    $("button[data-action]").on("click", function () {
        var $this = $(this);
        var action = $this.attr("data-action");
        var side = $this.attr("data-side");
        $(".sidebar." + side).trigger("sidebar:" + action);
        return false;
    });
});

$（文档）.ready（函数（）{
//四面八方
变量边=[“左”、“上”、“右”、“下”]；
//初始化侧栏
对于（变量i=0；i
侧边栏上缺少样式：

.sidebar{
position:fixed;
}

完整示例如下：


/*！
*jQuery边栏插件
*  ---------------------
*一个愚蠢的简单工具条jQuery插件。
*
*与1）一起开发{
返回self.each（函数（）{
$（此）.sidebar（选项）；
});
}
//宽度、高度
var width=self.outerWidth（）；
var height=self.outerHeight（）；
//默认值
变量设置=$.extend({
//动画速度
速度:200,，
//侧面：左|右|上|下
侧面：“左”，
//关门了
isClosed:错误，
//我应该关闭侧边栏吗？
接近：对
}，选项）；
/*!
*打开侧边栏
*$（[jQuery选择器]）.trigger（“侧栏：打开”）；
* */
打开（“侧栏：打开”，功能（ev，数据）{
var属性={}；
属性[settings.side]=0；
settings.isClosed=null；
self.stop（）.animate（属性，$.extend（{}，设置，数据）。速度，函数（）{
settings.isClosed=false；
自我触发（“侧栏：打开”）；
});
});
/*!
*关闭侧边栏
*$（“[jQuery选择器]）.trigger（“侧栏：关闭”）；
* */
打开（“侧栏：关闭”，函数（ev，数据）{
var属性={}；
如果（settings.side==“left”| | settings.side==“right”）{
属性[settings.side]=-self.outerWidth（）；
}否则{
属性[settings.side]=-self.outerHeight（）；
}
settings.isClosed=null；
self.stop（）.animate（属性，$.extend（{}，设置，数据）。速度，函数（）{
settings.isClosed=true；
自触发（“侧栏：关闭”）；
});
});
/*!
*切换侧边栏
*$（“[jQuery sel