jQuery slideDown и slideUp toggle issues

Question

Так что в основном я только начинаю с jQuery и JS, и у меня есть проблема.

У меня есть небольшое меню, когда пользователь нажимает на одну из ссылок, содержимое скользит вниз. Если окно открыто, оно переместится вверх.

Моя проблема в том, что когда вы нажмете на ту же самую ссылку, чтобы закрыть ее снова, она сместится, а затем, потому что код jQuery подсказывает, что он снова сползает вниз. Это означает, что вы никогда не сможете закрыть один бит содержимого, когда один из них открыт.

Мой JQuery Кодекс:

jQuery(document).ready(function(){ 

    jQuery(".radius5").hide(); 

    jQuery("a#contact-btn").click(function() { 
     jQuery(".radius5").slideUp(); 
     jQuery("div#contact").slideDown("slow"); 
    }); 

    jQuery("a#about-btn").click(function() { 
     jQuery(".radius5").slideUp(); 
     jQuery("div#about").slideDown("slow"); 
    }); 

    jQuery("a#portfolio-btn").click(function() { 
     jQuery(".radius5").slideUp(); 
     jQuery("div#portfolio").slideDown("slow-up"); 
    }); 

}); 

и HTML-код (упрощенно, конечно):

<a id="contact-btn" class="btn-slide" href="#">Contact</a> 
    <a id="about-btn" class="btn-slide" href="#">About</a> 
    <a id="portfolio-btn" class="btn-slide" href="#">Portfolio</a> 

    <div id="contact" class="radius5">Contact Us</div> 
    <div id="about" class="radius5">About Us</div> 
    <div id="portfolio" class="radius5">Our Portfolio</div> 

У меня также есть jsFiddle ссылку.

Я уверен, что на самом деле легко ответить. Я пробовал использовать addClass и removeClass, но, похоже, это не совсем правильно. Может ли кто-нибудь помочь?

С уважением,

Tom Oakley

Answer 1

Я бы настроить ваш HTML немного, чтобы отслеживать, какие элементы должны показать/скрыть, используя свойство href (за комментарий @ powerbuoy в):

<a id="contact-btn" class="btn-slide" href="#contact">Contact</a> 
<a id="about-btn" class="btn-slide" href="#about">About</a> 
<a id="portfolio-btn" class="btn-slide" href="#portfolio">Portfolio</a> 

<div id="contact" class="radius5">Contact Us</div> 
<div id="about" class="radius5">About Us</div> 
<div id="portfolio" class="radius5">Our Portfolio</div> 

Тогда ваш JavaScript станет намного проще:

$(document).ready(function() { 

    $(".radius5").hide(); 

    $("a.btn-slide").click(function(e) { 
     e.preventDefault(); 

     var $menu = $($(this).attr("href")); 

     $(".radius5").slideUp(); 

     if ($menu.is(":hidden")) { 
      $menu.slideDown("slow"); 
     } 
    }); 
}); 

Пример:http://jsfiddle.net/zLqYn/

Вы также мог бы взглянуть на slideToggle, но я заметил, что вы используете разные длительности в зависимости от того, вы сдвинув вверх или вниз. Если длительности одинаковы (например, вы двигаетесь вверх и вниз с длительностью "slow"), вы можете сделать код еще короче, используя slideToggle.

Answer 2

Все, что вам нужно сделать, это удалить текущий элемент из выбора $(".radius5"), чтобы он не скользнул вверх. Вы также можете сделать свой код более компактным, обрабатывая все click события в одном обработчике события:

$(function(){ 

    //cache the `.radius5` selector so it doesn't have to be re-calculated in the event handler 
    var $radius5 = $(".radius5").hide(); 

    //bind a `click` event handler to all three of your buttons, notice to select multiple items we just put a comma in between the selectors 
    $("#contact-btn, #about-btn, #portfolio-btn").click(function() { 

     //get the ID of the element to slideDown 
     var slide_down = "#" + this.id.replace('-btn', ''); 

     //slideUp all but the current element 
     $radius5.not(slide_down).slideUp(); 

     //slideDown the current element 
     $(slide_down).slideDown("slow"); 
    });     
}); 

Вот демо: http://jsfiddle.net/ePRsz/5/

UPDATE

Я просто перечитайте свой вопрос и если вы хотите, чтобы текущий скользящий элемент соскользнул, если его ссылка на навигацию снова нажата, вы можете изменить .slideDown() на .slideToggle():

$(function(){ 

    var $radius5 = $(".radius5").hide(); 

    $("#contact-btn, #about-btn, #portfolio-btn").click(function() { 
     var slide_down = "#" + this.id.replace('-btn', ''); 
     $radius5.not(slide_down).slideUp(); 
     $(slide_down).slideToggle("slow"); 
    });     
}); 

Демо-версия: http://jsfiddle.net/ePRsz/13/