JQuery переключить аккордеон без плагина - PullRequest
Новая
       35

JQuery переключить аккордеон без плагина

2 голосов
/ 11 марта 2011

Привет, у меня есть два раздела контента, и я хочу, чтобы только 1 открывалось одновременно.Они оба сворачиваются и открываются в зависимости от нажатия на заголовки.В настоящее время он работает, когда они независимы друг от друга, но я хочу, чтобы они скрывали друг друга, когда это показано.Я не хочу использовать плагин для jquery accordion.

вот код, который у меня сейчас есть:

HTML: 

<div class="topCats">
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4>
</div>
<div id="topCatsContainer">
   content 1
</div>
<div class="allCats">
    <h4><a href="#" class="closed">All Categories</a></h4>
</div>
<div id="allCatsContainer">
   content 2
</div>

JS: 

$('#allCatsContainer').css("display", "none");
$('.topCats h4 a').click( function() {
    $('#topCatsContainer').slideToggle(500);
        $(this).toggleClass("openBox");
});

$('.allCats h4 a').click( function() {
    $('#allCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");                                                                     
});

Любая помощь будет принята с благодарностью.

Спасибо

Ответы [ 2 ]

2 голосов
/ 11 марта 2011

Здесь недавно был дан ответ: Какой код мне нужен, чтобы свернуть div, когда открыт другой?

Самый простой способ - свернуть оба, а затем развернуть тот, который вы хотите. Тот, который уже свернут, будет проигнорирован. 

$('yourdivs').click( function() {
    $("yourdivs").slideUp();
    $(this).slideDown();
});

Обновление: выше не будет работать для него, потому что нет прямой связи между <a> и <div>. Это действительно некрасиво, но следующие работы http://jsfiddle.net/mrtsherman/MPwQ8/3/

$('#allCatsContainer').css("display", "none");

$('.topCats h4 a').click( function() {
    $('#topCatsContainer').slideToggle(500);    
    $('#allCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");
});

$('.allCats h4 a').click( function() {
    $('#allCatsContainer').slideToggle(500);
    $('#topCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");  
});

Есть много лучших способов сделать это. Первоначальная ссылка, которую я вам предоставил, содержит пример. Если вы хотите что-то более надежное, вам нужно создать некоторые средства, чтобы логически связать ваши ссылки с вашими div.

1 голос
/ 11 марта 2011

Я старался не изменять ваш HTML, если это возможно, чтобы вам не приходилось сталкиваться с головной болью при оформлении.К сожалению, это означает, что JS немного более жестко запрограммирован, чем мне хотелось бы.

HTML: 

<div class="topCats">
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4>
</div>
<div id="topCatsContainer" class="accordianContent">
   content 1
</div>
<div class="allCats">
    <h4><a href="#" class="closed">All Categories</a></h4>
</div>
<div id="allCatsContainer" class="accordianContent">
   content 2
</div>

HTML-код такой же, за исключением того, что я добавил класс вкаждый ваш контент div.

JS: 

$('#allCatsContainer').css("display", "none");

$('.topCats h4 a, .allCats h4 a').click(function() {
    var content = $(this).parent().parent().next();

    if(content.is(':visible')) {
        content
            .slideUp(500)
            .addClass('closed')
            .removeClass('openBox');
    } else  {
        content
            .parent()
            .find('.accordianContent:visible')
            .slideUp(500)
            .addClass('closed')
            .removeClass('openBox');

        content.slideDown(500).removeClass('closed').addClass('openBox');
    }
});

В основном JS находит контент, соответствующий ссылке, по которой щелкнули.Если содержимое было видно, то оно просто закрывается.Если его не было видно, мы закрываем тот, который был виден, и открываем содержимое, по которому щелкнули.

Если вы заметили, я переключаю классы openBox и closed, которые могут быть избыточными, но я не былуверен, если ваш стиль опирался на это или нет.

В общем, эта функциональность может быть реализована многими способами, и если вы захотите немного изменить свой HTML, мы могли бы сделать сторону JS более презентабельной :) В противном случаеВы можете просто использовать эту реализацию и избежать головной боли от стиля.

...