2014-11-27 5 views
0

Мне удалось обернуть контент аккордеона в div и также смог нажать активную вкладку вверху. Но я хочу внешнюю предыдущую, следующую и близкую кнопку аккордеона. Я попробовал серверные опции, но ничего не работает. Может ли кто-нибудь сказать мне, как это сделать.Невозможно выполнить следующую и предыдущую кнопку на jqueryui accordion

Это мой FIDDLE

<div id="accordion"> 
<div class="wrap"> 
    <h3><a href="#">Header 1</a></h3> 

    <div>Collapsible content 1</div> 
</div> 
<!-- end wrap --> 
<div class="wrap"> 
    <h3><a href="#">Header 2</a></h3> 

    <div>Collapsible content 2</div> 
</div> 
<!-- end wrap --> 
<div class="wrap"> 
    <h3><a href="#">Header 3</a></h3> 

    <div>Collapsible content 3</div> 
</div> 
<!-- end wrap --> 
<button class='previous'>Previous</button> 
<button class='next'>Next</button> 

$(window).load(function() { 
$(function() { 
    $("#accordion").accordion({ 
     header: '> div.wrap >h3' 
    }); 
}); 
}); 

$(".wrap").click(function() { 
//$(this).prependTo("#ImportantNumbers"); 
$(this).hide().prependTo("#accordion").slideDown(); 
}); 

ответ

1

http://jsfiddle.net/wq3pu8t9/1/

$('.next').click(function() { 

    var $a = $("#accordion"); 
    //Which panel is currently active 
    var $cur = $('.ui-state-active').parents('.wrap'); 
    //get number of panels 
    var len = $('.wrap').size(); 

    //get index of active panel 
    var ind = $a.accordion("option", "active") 
    //index increases by one,   
    ind++; 
    //the index of the panel that will become active 
    //if the index is greater than the maximum index 
    //index is set to zero, panel 
    if (ind > len - 1) ind = 0; 

    //currently active panel placed on the bottom 
    $cur.appendTo("#accordion"); 
    //next panel becomes active 
    $a.accordion("option", "active", ind); 

}) 

$('.previous').click(function() { 

    var $a = $("#accordion"); 
    var $cur = $('.ui-state-active').parents('.wrap'); 
    var len = $('.wrap').size(); 

    var ind = $a.accordion("option", "active") 
    ind--; 
    if (ind < 0) ind = len - 1; 

    $('.wrap').last().prependTo("#accordion"); 

    $a.accordion("option", "active", ind); 

}) 
+0

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

+0

, пожалуйста, помогите мне, как закрыть и расширить раздел, чтобы закрыть. я попытался с $ (document) .ready (function() { // заставляет потерять фокус при закрытии секции аккордеона IE и FF. функция collapseAll() { alert ("call collapseAll"); $ ("# аккордеон ") .фильтр (": имеет (.ui-state-active) ") .accordion (" активировать ", -1); $ (". ui-accordion-header "). blur(); } }) но это не работает – San

+1

http://jsfiddle.net/wq3pu8t9/3/ найти комментарии NEW – dm4web

1

Здесь вы идете: http://jsfiddle.net/aravi_vel/du7ocqom/1/

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

$accordion.accordion("option","active"); 
$accordion.accordion("option","active",next); 

Б помощь от этого ответа: https://stackoverflow.com/a/11041496/976777

Смежные вопросы