jQuery Slider问题-无法正确关闭

Question

http://jsfiddle.net/waJzP/43/

我将分解功能问题-

1. 如果单击"打开"(第1阶段)，然后单击"打开更多"(第2阶段)，再单击"关闭-打开更多"。但是，如果您单击"打开更多"(第2阶段)，然后单击"打开"(第3阶段)，再单击"关闭"，它们都会正确关闭。为什么会这样？

2. "打开图片"无法正确关闭。此外，如果你打开了"打开更多(第2阶段)"one_answers"打开更多"(第3阶段)，当你点击打开的图片时，它们应该关闭。但事实并非如此！

我是jquery的新手，这一切都很令人困惑！

$(document).ready(function() {
$('.stage1').hide();  
$("#stage1").click(function () {
$(".stage1").toggle("slide", { direction: "right" }, 1000);
});
$('.stage2').hide();  
$("#stage2").click(function () {
$(".stage2").slideToggle();
e.preventDefault();
});
$('.stage3').hide();  
$("#stage3").click(function () {
$(".stage3").slideToggle();
e.preventDefault();
});
$('.photos').hide();  
$("#photos").click(function () {
$(".photos").slideToggle();
e.preventDefault();
});
$("#showmap").click(function () {
if ($('.stage2, .stage3').is(':hidden'))
{$(".stage1").toggle("slide", { direction: "right" }, 1000); }
else
{
$(".stage3").slideToggle();
$(".stage2").slideToggle();
$(".stage1").delay(1000).toggle("slide", { direction: "right" }, 1000);
}
});
}); 

-----------------------------HTML-------------------------

<div id="stage1">Open</div>      
<div id="showmap">close (closes all)</div>
<div class="map-wrapper">
<img src="http://placehold.it/1000x300" width="100%">
<div class="stage1 map-main-slider">   <br>
<div id="stage2">open more</div>
<div id="photos"> Open Pictures (Should close stages 2 and 3 if open) </div>
</div>
</div>
<div>
</div>
<div class="photos" style="color:#FFFFFF;font-size:14px;text-align:center;">
<div> <br> <br> <br> I am Photos <br> <br> <br>  </div>
</div>
<div class="stage2" style="color:#FFFFFF;font-size:14px;text-align:center;">
<div id="stage3"> <br> <br> <br> Open More <br> <br> <br>  </div>
<div class="stage3" style="color:#FFFFFF;font-size:14px;text-align:center;"><br> <br> <br>I am More Infmation <br> <br> <br> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

---------------------------------CSS

.map-wrapper{
position: relative;
}
.map-main-slider {
background-color: rgba(233, 233, 233, 0.96);
background-image: url("/wordpress/wp-content/themes/penrose/img/noise.png");
bottom: 0;
height: 100%;
left: 0;
margin: 0;
position: absolute;
right: 0;
width: 100%;
}
.map-inner {
padding:4%
}
.stage2{
background:blue;
}
.stage3{
background:red;
}
.photos {background:green;}

Answer 1

在Showmap中，如果检查不正确，请单击函数检查初始值。我已修改为以下代码

$("#showmap").click(function () {
if ($('.stage2').is(':hidden') && $('.stage3').is(':hidden'))
{
$(".stage1").toggle("slide", { direction: "right" }, 1000); }
else
{
$(".stage3").slideToggle();
$(".stage2").slideToggle();
$(".stage1").delay(1000).toggle("slide", { direction: "right" }, 1000);
}
});

请拨弄

http://jsfiddle.net/waJzP/45/感谢