Проблемы с переключением слайдов jQuery slideDown и slideUp

Так что в основном я только начинаю работать с 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, но, похоже, не понял. Кто-нибудь может помочь?

С уважением,

Том Окли


jquery navbar slidedown slideup
person Tom Oakley    schedule 01.01.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Все, что вам нужно сделать, это удалить текущий элемент из выбора $(".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/

ОБНОВЛЕНИЕ

Я просто перечитал ваш вопрос, и если вы хотите, чтобы текущий сдвинутый вниз элемент сдвигался вверх, если его навигационная ссылка будет нажата снова, вы можете изменить .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/

person Jasper    schedule 01.01.2012

arrow_upward
0
arrow_downward

Я бы немного подправил ваш 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.

person Andrew Whitaker    schedule 01.01.2012
comment
Используйте атрибут href вместо своего собственного data-menu. Тогда это имеет смысл и без JS. - person powerbuoy; 01.01.2012
comment
@powerbuoy: Ага, ты прав, это отличная идея. Я обновил ответ соответственно. - person Andrew Whitaker; 02.01.2012