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代码之后

$(".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;
});

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

使用Javascript动画DropDown Div面板

1 个答案: