我创建了一个小例子，请看一下， http://jsfiddle.net/bWTwL/ 我想要一个这样的面板： 1.li(home).click > 向左滑动面板 > 内容淡入 2。 X（点击）>内容淡出>向右滑动面板
现在，我有 7 个列表项，例如家庭、关于我等。我希望当用户单击任何列表项时，该列表项的特定内容（家庭、关于我等）应该淡入。如果面板已经可见，那么只有内容应该在点击时淡入/淡出。我想为它们中的每一个编写每个函数，但这将是一个很长的混乱代码。
我认为像 html5 数据属性这样的东西来完成这项工作但失败了。请在此处查看相同的效果以更好地理解：http ://www.unpezvivo.com/proyectos/themeforest/cspp/02/#
提前致谢。
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;
}
<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>
$(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');
});
});
我使用了pub/sub 模式，这让事情变得更容易。我们最小化冗余代码。而且工作流程更容易遵循。
我强烈建议您对自定义事件使用命名空间（例如，、、、togglePanel... hidePanel）showPanel。我没有在这段代码中这样做，因为它对于新手脚本编写者来说已经很复杂了，并且留给你作为家庭作业来进一步研究这段代码。
使它们都成为同一个类（例如，myclass），然后使用this：
$('.myclass').on('click', function() {
$(this).animate({
'width': 'show'
}, 1000, function() {
$(this).fadeIn(500);
});
});
实际上，我只是测试了上面的代码，但它不起作用，因为淡入的元素与您单击的元素不同，因此第二个this元素没有引用正确的元素。您需要能够使用其 DOM 关系（例如，孩子）将您想要淡入的对象引用到正在单击的对象。（见这个。）
所以你可以有：
$('.myclass').on('click', function() {
$(this).animate({
'width': 'show'
}, 1000, function() {
$(this).children(.class2).fadeIn(500);
});
});
为此，您需要设置不同的 HTML，而不是将菜单和面板分开。您可以使用 CSS 将元素放置在 .class2 中。
或者，您可以只给所有东西一个唯一的ID，所以菜单项#M1 触发面板项#P1，#M2 触发#P2 等...
【谢夫的回答比我的好很多！】
在事件函数中使用 $(this) 而不是特定的 CSS 选择器。这将引用触发的对象：
$(this).fadeOut();
您可以通过逗号分隔将其与选择器结合使用：
$(".slide", this).fadeOut();