带有 Javascript 的动画下拉 Div 面板

Question

提前感谢您提供任何可能的帮助。

基本上，我希望创建由函数toggleSlider 激活的下拉 div 面板，在最初加载页面时面板是隐藏的。前两个链接的“恢复”和“工作”功能就像我希望的那样，您单击一个，相应的 div 就会进入，当您再次单击同一链接或其他链接之一时，内容将被收回。第三个链接与其他链接不同，当您单击它时，相应的 div 会覆盖其他内容，并且只能通过再次单击同一链接来收回。这是它的样子......

http://www.visuallypersuasive.com/jason/test.html#

这里是javascript

function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").fadeOut(600, function(){
        $("#panelThatSlides").slideUp();
    });
}
if ($("#panelThatSlides2").is(":visible")) {
    $("#contentThatFades2").fadeOut(600, function(){
        $("#panelThatSlides2").slideUp();
    });
}
else {
    $("#panelThatSlides").slideDown(600, function(){
        $("#contentThatFades").fadeIn();
    });
}   
}

function toggleSlider2() {
if ($("#panelThatSlides2").is(":visible")) {
    $("#contentThatFades2").fadeOut(600, function(){
        $("#panelThatSlides2").slideUp();
    });
}
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").fadeOut(600, function(){
        $("#panelThatSlides").slideUp();
    });
}

else {
    $("#panelThatSlides2").slideDown(600, function(){
        $("#contentThatFades2").fadeIn();
    });
}   
}

function toggleSlider3() {
if ($("#panelThatSlides3").is(":visible")) {
    $("#contentThatFades3").fadeOut(600, function(){
        $("#panelThatSlides3").slideUp();
    });
}
if ($("#panelThatSlides2").is(":visible")) {
    $("#contentThatFades2").fadeOut(600, function(){
        $("#panelThatSlides2").slideUp();
    });
}
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").fadeOut(600, function(){
        $("#panelThatSlides").slideUp();
    });
}


else {
    $("#panelThatSlides3").slideDown(600, function(){
        $("#contentThatFades3").fadeIn();
    });
}   


}

这里是html

<div id="resume"><a class="nav" href="#" onclick="toggleSlider();">resume</a>
<div id="panelThatSlides" style="position:relative; left:250px; display:none;   
background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none; 
background:#fff; width:950px; height:500px;">content</div>
</div>
</div>

<div id="work"><a class="nav" href="#" onclick="toggleSlider2();">work</a>
<div id="panelThatSlides2" style="position:relative; left:-420px; display:none; 
background:#eee; width:950px; height:500px;">
<div id="contentThatFades2" style="position:relative; left:00px; display:none; 
background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>

<div id="contact"><a class="nav" href="#" onclick="toggleSlider3();">contact</a>
<div id="panelThatSlides3" style="position:relative;left:-550px; display:none;    
background:#eee; width:950px; height:500px;">
<div id="contentThatFades3" style="position:relative; left:00px; display:none; 
background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>

虽然我觉得我对 html 和 css 有扎实的基础到中级理解，但 javascript 对我来说几乎是希腊语。理想情况下，如果我能让它工作，我想使用这种技术在工作链接/div 中嵌套另一个下拉 div，其中包含三个以上的链接。

再次感谢任何可以提供帮助的人。

Answer 1

测试一下我对你的代码做了一点改动

HTML：

<div class="navbar">
   <div id="resume" class="navmenu"><a class="nav" href="#" >resume</a>
     <div class="panelThatSlides" style="position:relative; left:250px; display:none;   background:#eee; width:950px; height:500px;">
        <div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">content</div>
        </div>
     </div>
     <div id="work" class="navmenu"><a class="nav" href="#" >work</a>
         <div class="panelThatSlides" style="position:relative; left:-420px;display:none; background:#eee; width:950px; height:500px;">
            <div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">mucho content</div>
        </div>
     </div>
     <div id="contact" class="navmenu"><a class="nav" href="#" >contact</a>
        <div class="panelThatSlides" style="position:relative;left:-550px;display:none;background:#eee; width:950px; height:500px;">
          <div id="contentThatFades" style="position:relative; left:00px; display:none;background:#fff; width:950px; height:500px;">mucho mass content</div>
       </div>
     </div>
</div>

必须放在Html代码之后的js

$(".navbar").find(".nav").bind("click",function(e){
 if($(e.target.parentNode).find(".panelThatSlides").is(":visible")){
    $(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
      $(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
    });
 }
 $(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
     $(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
 });
 $(e.target.parentNode).find(".panelThatSlides").slideDown(600, function(){
    $(e.target.parentNode).find(".panelThatSlides").find(".contentThatFades").fadeIn();
 });
 return false;
});  

现在您可以毫无问题地添加导航