Question

我正试图在手风琴里面制作一个巫师。看看我的代码：

我做错了什么，我想要每个手风琴元素上的上一个和下一个按钮。

Answer 1

使用最新版本的jQuery和jQuery UI的正确解决方案可以在这里找到：

<强> HTML

<div id="accordion">
    <h3><a href="#">1. Profilbilde</a></h3>
    <div>
        <p>
           test
        </p>
        <button class='next'>
            Next
        </button>
    </div>
    <h3>
        <a href="#">2. Organisasjon</a></h3>
    <div>
        <p>
            test
        </p>
        <button class='previous'>
            Previous
        </button>
        <button class='next'>
            Next
        </button>
    </div>
    <h3>
        <a href="#">3. Tjenestested</a></h3>
    <div>
        <p>
            test
        </p>
        <button class='previous'>
            Previous
        </button>
    </div>
</div>

jQuery代码

jQuery(document).ready(function(){
    $('#accordion').accordion();
    $('#accordion button').click(function(e) {
        e.preventDefault();
        var delta = ($(this).is('.next') ? 1 : -1);
        $('#accordion').accordion('option', 'active', (
             $('#accordion').accordion('option','active') + delta  ));
    });
});

Answer 2

Hiya 2解决方案：

<强>＆GT;＆GT;＆GT;＆GT;解决方案1＆lt;＆lt;＆lt;＆lt;

Accordion（）解决方案：

工作演示： http://jsfiddle.net/NDncE/9/

请注意上一个和下一个按钮：http://jsfiddle.net/NDncE/12/

缺少的脚本包括：

<强>代码：

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<强>＆GT;＆GT;＆GT;＆GT;解决方案2＆lt;＆lt;＆lt;＆lt;

在这里，您可以获得另一个工作版本：http://jsfiddle.net/NDncE/6/

有用的链接请阅读：http://docs.jquery.com/UI/Accordion（Accordion Api＆amp; use）

Jquery代码

jQuery(document).ready(function(){
    $('#accordion h3').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});

HTML：（无变化）

<div id="accordion">
    <h3><a href="#">1. Profilbilde</a></h3>
    <div>
        <p>
           test
        </p>
        <button>
            Last opp bildet
        </button>
    </div>
    <h3>
        <a href="#">2. Organisasjon</a></h3>
    <div>
        <p>
            test
        </p>
    </div>
    <h3>
        <a href="#">3. Tjenestested</a></h3>
    <div>
        <p>
            test
        </p>
    </div>
</div>

这会有所帮助，干杯！

Answer 3

@ roberto-mardeni在答案上的小变化，以编程方式单击下一个标题，而不是覆盖“ active”值：

http://jsfiddle.net/jyxba7pz/

JS：

jQuery(document).ready(function(){
    $('#accordion').accordion();
    $('#accordion .next, #accordion .previous').click(function(e) {
        e.preventDefault();
        if ( $(this).hasClass('next') ) {
            $(this).closest('.ui-accordion-content').next('.ui-accordion-header').click();    
        } else if ( $(this).hasClass('previous') ) {
            $(this).closest('.ui-accordion-content').prevUntil('.ui-accordion-header:first').prev().click();    
        }
    });
});

HTML：

<div id="accordion">
    <h3><a href="#">1. Profilbilde</a></h3>
    <div>
        <p>
           test
        </p>
        <button class='next'>Next</button>
    </div>
    <h3>
        <a href="#">2. Organisasjon</a></h3>
    <div>
        <p>
            test
        </p>
        <button class='previous'>Previous</button>
        <button class='next'>Next</button>
    </div>
    <h3>
        <a href="#">3. Tjenestested</a></h3>
    <div>
        <p>
            test
        </p>
        <button class='previous'>Previous</button>
    </div>
</div>

使用jQuery手风琴的向导，上一个/下一个按钮

3 个答案: