Блог

Главная - Вопросы по программированию - jQuery с возможностью скрывать и показывать

jQuery с возможностью скрывать и показывать

#jquery

#jquery

Вопрос:

Я не понимаю, как сообщить моей функции, что если я снова нажму на открытые вкладки, закройте и остановите анимацию. Моя проблема сейчас в том, что я закрываю вкладку и повторяю действие .show () . Вот скрипка, которую вы можете увидеть; http://jsfiddle.net/X2dsS/1 /

 $('.lst-cours .extrainfo').hide()
$('.lst-cours').click(function(){
    $('.lst-cours .extrainfo').hide("slow")
    $('.lst-cours .extrainfo').removeClass("active")
    $(this).children().find('.extrainfo').show("slow").addClass('active')
});

Ответ №1:

Итак, в целом, вам нужно добавить оператор if для проверки класса, но вам нужно сделать это до того, как вы начнете скрывать и показывать. Затем сохраните это значение. Ниже приведен код, который работает хорошо, включая дополнительную stop команду, которая предотвратит повторение nimation снова и снова.

 $('.lst-cours').click(function(){
    var clickElement = $(this).children().find('.extrainfo');
    var hideOnly = clickElement.hasClass("active");

    $('.lst-cours .extrainfo').stop();
    $('.lst-cours .extrainfo.active').hide("slow");
    $('.lst-cours .extrainfo.active').removeClass("active");        

    if (!hideOnly){
        clickElement.show("slow").addClass('active');
    }
});

Посмотрите на скрипку: http://jsfiddle.net/2Lqtp/4 /

Комментарии:

1. Проблема в том, что если я нажму на другую вкладку, когда она открыта, она закроет вкладку, но не откроет другую, на которую мы нажимаем.

2. @goregrind Окончательное решение здесь должно работать хорошо и имеет команду stop, чтобы убедиться, что анимация не повторяется. Желаю удачи!

Ответ №2:

Вам нужны небольшие изменения, пожалуйста, смотрите код ниже:

     $('.lst-cours .extrainfo').hide()
$('.lst-cours').click(function(){
    if($(this).children().find('.extrainfo').is(":visible"))
    {
        $('.lst-cours .extrainfo').hide("slow");
        $('.lst-cours .extrainfo').removeClass("active");
    }
    else
    {
        $('.lst-cours .extrainfo').hide("slow");
        $('.lst-cours .extrainfo').removeClass("active");
    $(this).children().find('.extrainfo').show("slow").addClass('active');
   }

    });