Question

JS：

    <script type="text/javascript">
    <script type="text/javascript">
function slideUpAll(id){
 if(id != "about")
   $('#about').slideUp();
 if(id != "team")
   $('#team').slideUp();
 if(id != "contact")
   $('#contact').slideUp();
 if(id != "job")
   $('#job').slideUp();
}
function sd_about(){$('#about').slideDown("slow");}
function sd_team(){$('#team').slideDown("slow");}
function sd_contact(){$('#contact').slideDown("slow");}
function sd_job(){$('#job').slideDown("slow");}
$(function(){
  $("#about").delegate("anchorOrDivOrImg", "mousedown", function(e){

     slideUpAll(e.target.id);
  });
});
</script>

HTML：

        <div id="nav"> 
            <ul>
            <li><a href="#" onclick="sd_about()">About</a></li>
            <li><a href="#" onclick="sd_team()">Team</a></li>
            <li><a href="#" onclick="sd_contact()">Contact</a></li>
            <li><a href="#" onclick="sd_job()">Jobs</a></li>
            </ul>
        </div>
<div id="about">
        <div id="about_left">
            about
        </div><!--about_left--> 
        <div id="about_right">
            <img src="img/book.png" width="256" height="161" alt="LogicPad eBooks" />
        </div>

        <div id="clear"> </div>
</div><!--about-->
<div id="team">
<h1>team</h1>
</div>
<div id="contact">
<h1>contAct</h1>
</div>
<div id="job">
<h1>job</h1>
</div>

我要完成的任务：如果您点击一个链接，然后点击另一个链接，则第一个链接会缩回，最后点击的链接会展开。

现在正在做什么：如果您点击一个链接，然后点击另一个链接，它基本上只是将两组内容放在另一个链接之下。

有人可以帮助我吗？我究竟做错了什么？请在回答中显示一些源代码。

Answer 1

试试这个

<script type="text/javascript">
function slideUpAll(id){
 if(id != "about")
   $('#about').slideUp();
 if(id != "team")
   $('#team').slideUp();
 if(id != "contact")
   $('#contact').slideUp();
 if(id != "job")
   $('#job').slideUp();
}
function sd_about(){$('#about').slideDown("slow");}
function sd_team(){$('#team').slideDown("slow");}
function sd_contact(){$('#contact').slideDown("slow");}
function sd_job(){$('#job').slideDown("slow");}
$(function(){
  $("#about").delegate("anchorOrDivOrImg", "mousedown", function(e){

     slideUpAll(e.target.id);
  });
});
</script>

Answer 2

首先为所有父导航提供一个类，例如nav。

然后在每次slideToggle之前，执行$(".nav").slideUp("slow")

Answer 3

如果没有看到您的链接，也许您可以从这个jsfiddle示例中受益：drop down menus。

我想也许你需要包含一个点击功能。现在，我所能看到的是你已经创建了函数但没有调用。您必须从onclick中的链接调用该函数，或者在jquery中调用此函数：

$('a').click(function(){ 
//code here 
});

链接jQuery之间切换

3 个答案: