Question

我能够在div中包装手风琴内容，并且还能够将活动标签推到顶部。但是我想要外部上一个，下一个和接近的手风琴按钮。我尝试了几个选项但没有任何工作。任何人都可以告诉我如何去做。

 <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();
 });

Answer 1

在这里：http://jsfiddle.net/aravi_vel/du7ocqom/1/

使用＆＃34;选项：active＆＃34;确定当前活动面板的方法。使用相同的方法设置新的活动面板。

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

使用此答案提供的帮助：https://stackoverflow.com/a/11041496/976777

Answer 2

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);

})

无法使下一个和上一个按钮在jqueryui手风琴上工作

2 个答案: