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>
我要完成的任务:如果您点击一个链接,然后点击另一个链接,则第一个链接会缩回,最后点击的链接会展开。
现在正在做什么:如果您点击一个链接,然后点击另一个链接,它基本上只是将两组内容放在另一个链接之下。
有人可以帮助我吗?我究竟做错了什么?请在回答中显示一些源代码。
答案 0 :(得分: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>
答案 1 :(得分:0)
首先为所有父导航提供一个类,例如nav
。
然后在每次slideToggle之前,执行$(".nav").slideUp("slow")
答案 2 :(得分:0)
如果没有看到您的链接,也许您可以从这个jsfiddle示例中受益:drop down menus。
我想也许你需要包含一个点击功能。现在,我所能看到的是你已经创建了函数但没有调用。您必须从onclick中的链接调用该函数,或者在jquery中调用此函数:
$('a').click(function(){
//code here
});