Переключение между ссылками jQuery

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

Не видя ваших ссылок, возможно, вы сможете извлечь выгоду из этого примера jsfiddle: выпадающие меню .

Я думаю, возможно, вам нужно включить функцию щелчка.Сейчас я вижу только то, что у вас есть функции, созданные, но не вызванные.Вы должны либо вызвать функцию по ссылке в onclick, либо в jquery, например:

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

Answer 3

Сначала присвойте всем родительским навигационным классам класс, например nav.

Затем перед каждым сдвигом слайдов выполните $(".nav").slideUp("slow")