Проблемы с переключением jQuery slideDown и slideUp - PullRequest
Новая
       40

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

2 голосов
/ 01 января 2012

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

С уважением,

Том Оукли

Ответы [ 2 ]

0 голосов
/ 01 января 2012

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

0 голосов
/ 01 января 2012

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

...