JQueryアコーディオン、次および前のウィザード、前および次のセクションを取得する方法

StackOverflow https://stackoverflow.com/questions/1418202

  •  07-07-2019
  •  | 
  •  

質問

正常に動作するJqueryアコーディオンがあります。各ヘッダーをクリックすると、セクションが展開/折りたたみます。しかし、「次へ」をクリックすると機能が追加されます。ボタンをクリックすると次のセクションが開き、[前へ]をクリックします。ボタンを押すと前のセクションに戻ります。

これはこのページで行われました http：//jquery.bassistance .de / accordion / demo /？p = 1.1.2 （最後の例）ですが、同じ場合にどのように実装するのかわかりません。

ご提案をお願いします。

ありがとう

更新：アコーディオンの前または次のセクションを取得するにはどうすればよいですか

<script type="text/javascript">
 $("#accordion").accordion({ 
   header: "h3.header"
   , autoHeight: false
   , collapsible: true
  });
</script>

<div id="accordion">
 <h3 class="header">Section 1</h3>
 <div> content 1 .. content 1 .. content 1 .. content 1 ..
  <input class="next" type="button" value="next"/>   
 </div>
 <h3 class="header">Section 2</h3>
 <div> content 2 .. content 2 .. content 2 .. content 2 ..
  <input class="previous" type="button" value="previous"/>
  <input class="next" type="button" value="next"/>   
 </div>
 <h3 class="header">Section 3</h3>
 <div> content 3 .. content 3 .. content 3 .. content 3 ..
  <input class="previous" type="button" value="previous"/>
 </div> 
</div>
役に立ちましたか？

解決

機能させることができました。これを試してみると、jQuery 1.6とjQuery UI 1.8で動作します：

HTML：

<div id="checkout">
    <h2><a href="#">Section 1</a></h2>
    <div>
        <form action="#">
            <h3>Content</h3>
            <input type="submit" class="next" value="Continue" />
        </form>
    </div>
    <h2><a href="#">Section 2</a></h2>
    <div>
        <form action="#">
            <h3>Content</h3>
            <input type="submit" class="prev" value="Back" />
        </form>
    </div>
</div>

jQuery：

<script type="text/javascript">
    $(document).ready(function () {
        // create new accordion
        var checkout = $('#checkout').accordion({ event: false });

        // assign accordion navigation events to button clicks
        $('form', checkout).each(function (index) {
            $(this)
            .children(':submit')
            .filter('.next, .prev')
            .click(function () {
                checkout.accordion('option', 'active', index + ($(this).is('.next') ? 1 : -1));
                return false;
            });
        });
    });
</script>

他のヒント

これをjQueryファイルに追加します。関数$（＆quot;＃accordion＆quot;）。accordion（＆quot; next＆quot;）とオプション＆quot; loopOnNext＆quot;を追加します。 （デフォルトはfalse）、終了時にトップボックスに強制的に戻ります。

$.extend($.ui.accordion.prototype, {
    next: function(){
        var index = this.option('active') || 0,
            next = index + 1,
        nodes = $(this.element).children('h3').length;
        if(next >= nodes && this.option('loopOnNext') === true) {
            next = 0;
        }

        return this.activate(next);
    }
});

同様の問題があり、使用しました：

<button onclick="$('#accordion').accordion('activate', 0);">Prev</button>
<button onclick="$('#accordion').accordion('activate', 2);">Next</button>

各アコーディオンペイン。これは2番目のペインにあり、最初（インデックス0）に戻るか、3番目（インデックス2）に進みます。

例のようにやろうとしましたか？

var wizard = $("#accordion").accordion({ 
    header: 'h3.header', 
    event: false
}); 

$("h3.header", wizard).each(function(index) { 
    $(this) 
    .next() 
    .children(":button") 
    .filter(".next, .previous") 
    .click(function() { 
        wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1)) 
    }); 
});

同じ問題の解決策を探していて、これを思いつきました（jQuery 1.4.2とjQuery UI 1.8.1を使用しています）：

<div id="wizard">
    <h3><a href="#step1">Step 1 / 3</a></h3>
    <div id="step1">
        <button type="button">Next &raquo;</button>
    </div>
    <h3><a href="#step2">Step 2 / 3</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>
    <h3><a href="#step3">Step 3 / 3</a></h3>
    <div id="step3">
        <button type="submit">Finish</button>
    </div>
</div>

これはスクリプトです：

<script type="text/javascript">
    $(function() {

        $('#wizard').accordion();

        $('#wizard :button').each(function (index, elm) {
            $(elm).click(function() {
                $('#wizard').accordion('activate', index + 1);
            });
        });

    });
</script>

これを試してください：

var wizard = $("#register_form").accordion({
    header: '.title',
    event: 'none',
    collapsible: false
});
$(':button.previous').click(function() { wizard.accordion("activate", 0); });
$(':button.next').click(function() { wizard.accordion("activate", 1); });

：button は前のボタンと次のボタン、ウィザードはjQueryアコーディオンです。 他のすべてのコードは省略します。これが機能するかどうかを確認します。 フィードバックをお寄せください、ありがとう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top