关于关于 jquery 淡入淡出滑动面板的帖子（http://stackoverflow.com/q/10061847/1688202）。
我想知道该方法是否可以保留？这样内容面板将是标准可见的，并且在单击时消失。
它试图更改 JQuery 代码中的一些变量，但我没有成功地做到这一点。
下面的代码由Shef (http://stackoverflow.com/users/645186/shef)编写
由蝙蝠侠解决
.panel.default {
display:block;
}
.panel.default .content{
display:block;
}
到 CSS，并将类默认值添加到加载页面时要显示的面板，例如
<div class="panel home default">
1.CSS
div.panel {
display:none;
position: absolute;
top: 0;
width:70%;
right:0%;
height: 100%;
z-index: 3;
margin: 0;
overflow:hidden;
background-color:black;
}
.panel div.content {
display:none;
font-family:arial;
color:white;
padding:50px;
overflow:hidden;
}
span.close {
position:absolute;
right:10px;
top:15px;
cursor:pointer;
}
2. 标记
<ul id="menu">
<li><a id="home" href="#">Home</a></li>
<li><a id="about-me" href="#">About Me</a></li>
</ul>
<div class="panels">
<div class="panel home">
<div class="content">
<span class="close">X</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
</div>
</div>
<div class="panel about-me">
<div class="content">
<span class="close">X</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
</div>
</div>
</div>
3. jQuery
$(document).ready(function() {
var $panels = $('.panels > .panel');
$('#menu > li').on('click', 'a', function() {
$panels.filter('.'+this.id).trigger('togglePanel');
});
$panels
.on('togglePanel', function(){
var $this = $(this)
, $activePanels = $panels.filter(':visible').not($this);
if ($activePanels.length) {
$activePanels
.one('panelHidden', function(){
$this.is(':visible')
? $this.trigger('hidePanel')
: $this.trigger('showPanel');
})
.trigger('hidePanel');
} else {
$this.is(':visible')
? $this.trigger('hidePanel')
: $this.trigger('showPanel');
}
})
.on('hidePanel', function(){
var $this = $(this);
$this.find('.content').fadeOut(500, function() {
$this.animate({
'width': 'hide'
}, 1000, function(){
$this.trigger('panelHidden');
});
});
})
.on('showPanel', function(){
var $this = $(this);
$this.animate({
'width': 'show'
}, 1000, function() {
$this.find('.content').fadeIn(500, function(){
$this.trigger('panelShown');
});
});
});
$panels.find('.content .close').on('click', function() {
$(this).closest('.panel').trigger('togglePanel');
});
});