我有一个带有四个按钮的导航和一个包含 4 个部分的部分。单击导航按钮时,“部分”会滑出,如果选择了另一个,则前一个托盘滑入,单击的托盘滑出。但是我遇到的问题是,当再次选择当前已选择的按钮以使该托盘滑回时。我知道我的代码有点混乱,但是帮助肯定会很棒。
$(function hideDrawers() {
if($('#contentwrapper section').css('left') != '-800px'){
$('#contentwrapper section').animate({left: "-800px"}, 500);
}
Active = null;
});
$(function() {
var $one = $("#content1");
var $two = $("#content2");
var $three = $("#content3");
var $four = $("#content4");
$("#specials").click(function() {
$('#contentwrapper section').animate({left: "-800px"}, 500);
$one.animate({left: "0px"});
});
$("#lookup").click(function() {
$('#contentwrapper section').animate({left: "-800px"}, 500);
$two.animate({left: "0px"});
});
$("#recipe").click(function() {
$('#contentwrapper section').animate({left: "-800px"}, 500);
$three.animate({left: "0px"});
});
});
资产净值
<nav>
<span id="logo">
<img src="img/logo.png" />
</span>
<span class="nav">
<ul>
<a href="#" id="specials" ><span class="wedge"></span><li class="special"><span></span><p>Daily Specials</p></li></a>
<a href="#" id="lookup"><span class="wedge"></span><li class="lookup"><span></span><p>Product Lookup</p></li></a>
<a href="#" id="recipe"><span class="wedge"></span><li class="recipes"><span></span><p>Recipes</p></li></a>
<a href="#" id="pharmacy"><span class="wedge"></span><li class="pharmacy"><span></span><p>Pharmacy</p></li></a>
</ul>
</span>
</nav>
托盘部分
<section id="contentwrapper">
<!--<img src="img/content-bg.png" />-->
<section id="content1" class="contentbg">
<div id="slides">
<div class="slides_container">
<a href="#"><img src="img/slides/image1.jpg" width:"570" height="270"></a>
</div>
<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
</section>
<section id="content2" class="contentbg">
</section>
<section id="content3" class="contentbg">
</section>
<section id="content4" class="contentbg">
</section>
</section>
我知道我目前拥有它,如果一个按钮被选择两次,功能点击的脚本只会重复我尝试搜索这种类型的示例,但我通常会导致幻灯片等。