Jquery slideToggle () - переключать только определенные элементы - PullRequest
Новая
       18

Jquery slideToggle () - переключать только определенные элементы

2 голосов
/ 09 декабря 2011

У меня есть страница, где под ними спрятаны вопросы с ответами. Когда кто-то нажимает на вопрос, ответ смещается вниз (это отдельная функция, которая отлично работает). При повторном нажатии он возвращается в свое скрытое состояние.

У меня проблема с отдельной ссылкой #expand-close a, которая при нажатии открывает / закрывает ВСЕ ответы на вопросы.

Когда ответ уже открыт, эта функция запускается и открывает все закрытые ответы, но закрывает все открытые ответы.

Я хочу, чтобы он открывал все и оставлял открытыми ответы открытыми, закрывал все и держал закрытые ответы закрытыми. 

$('#expand-close a').click(function () {

        $(this).toggleClass("hide");

        $('.faq-hideable').slideToggle(500);
        $('.faq-hideable').closest('li').find('h2').toggleClass('p-open');

    });

Ответы [ 3 ]

1 голос
/ 09 декабря 2011

Для добавления / удаления классов это просто, поскольку toggleClass() имеет необязательный параметр switch, который определяет, должен ли класс быть добавлен или удален (вместо простого его переключения).

Для .slideToggle() такой возможности нет, поэтому мы делаем это вручную, используя базовое условие if / else для выбора между slideUp() или slideDown().

$('#expand-close a').click(function () {
    var tohide = $(this).toggleClass("hide").hasClass("hide");

    if (tohide) {
        $('.faq-hideable').slideUp(500);
    } else {
        $('.faq-hideable').slideDown(500);
    }
    $('.faq-hideable').closest('li').find('h2').toggleClass('p-open', !tohide);

});

Если вы хотите что-то более сжатое (но менее читаемое): 

$('#expand-close a').click(function () {
    var tohide = $(this).toggleClass("hide").hasClass("hide");
    $('.faq-hideable')[tohide ? "slideUp" : "slideDown"](500)
        .closest('li').find('h2').toggleClass('p-open', !tohide);
});
0 голосов
/ 09 декабря 2011

У меня есть что-то вроде вашей системы открытия / закрытия. Я использую if закрытие, как это: 

$('#expand-close a').click(function () {
        if ($('.faq-hideable').is(':hidden')) {
            $('.faq-hideable').show();                
        }
        else {
        $('.faq-hideable').hide();
        }
    });

Надеюсь, это поможет вам

0 голосов
/ 09 декабря 2011

попробуйте что-то вроде следующего (вам нужно изменить селектор, чтобы он соответствовал вашим HTML / предложениям): 

$('#expand-close a').click(function () {

        $(this).toggleClass("hide");

        if($(this).hasClass("hide")){
             $('.faq-hideable .answer:visible').slideToggle(500);
        }else{
             $('.faq-hideable .answer:hidden').slideToggle(500);
        }
        $('.faq-hideable').closest('li').find('h2').toggleClass('p-open');

    });
...