Jquery баян свернуть все - PullRequest
Новая
       14

Jquery баян свернуть все

3 голосов
/ 18 сентября 2011

Я использую это, чтобы развернуть или свернуть некоторый div 

    $("h3.trigger").click(function(){
    $(this).toggleClass("active").next().fadeToggle(500,"swing");
    return false;
});

в этом HTML-коде 

    <div class="foo">
    <h3 class="trigger active">Test 1</h3>
    <div class="block" style="display:block">
        <p>Lorem ipsum dolor </p>
    </div>
</div>
<div class="foo">
    <h3 class="trigger">Test 2</h3>
    <div class="block" style="display:none">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<div class="foo">
    <h3 class="trigger">Test 3</h3>
    <div class="block" style="display:none">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

и все работает отлично; -)

Но я хотел бы иметь возможность свернуть все открытые div, кроме того, который открывается нажатием h3!

Спасибо за вашу помощь ...

Крис

Ответы [ 3 ]

4 голосов
/ 18 сентября 2011

DEMO 

$('.trigger').click(function() {
    var d = $(this).next('.block');
    check = (d.is(':visible')) ? d.slideUp() : ($('.block').slideUp())(d.slideDown());
});

Это позволит вам даже скрыть открытый, если вы щелкнете по нему еще раз!Самый маленький скрипт аккордеона, использующий TERNARY OPERATORS.

Если вам нужна помощь в понимании, я могу прокомментировать мой код.

Вот код с вашим .active:

демо 

$('.trigger').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    var d = $(this).next('.block');
    check = (d.is(':visible')) ? d.slideUp() : ($('.block').slideUp())(d.slideDown());
});
0 голосов
/ 18 сентября 2011

Что вам нужно сделать, это сначала закрыть все переключаемые элементы, а затем открыть тот, который был только что нажат, но только если тот, который щелкнул, не открыт в данный момент. Следующий код должен сделать это: 

$("h3.trigger").click(function(){
    $(".foo").fadeOut(500,"swing");
    if(!$(this).toggleClass("active").next().is(':visible')){
        $(this).toggleClass("active").next().fadeIn(500,"swing");
    }
    return false;
});
0 голосов
/ 18 сентября 2011

Как насчет этого? 

$("h3.trigger").click(function(){
  $("h3.trigger").each(function() {
    $(this).removeClass("active").next().fadeOut(500, "swing"); 
  });
  $(this).addClass("active").next().fadeIn(500,"swing");
  return false;
});

Вы также можете использовать аккордеон jQuery UI , который, я считаю, имеет опцию для такого поведения.(По крайней мере, я знаю, что делал это раньше, но я точно не помню, как и как сайт находится в интрасети, поэтому я не вижу его сейчас.)

...