3

既存のフィドルから始めて、私はこのサンプルを作成しました：http: //jsfiddle.net/2DaR6/90/

これがhtmlコードです：

<div id="accordion">
  <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3>
    <div> Good Morning Stackoverflow</div>
  <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3>
    <div>Buongiorno Stackoverflow</div>
  <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3>
    <div>Bonjour Stackoverflow</div>
</div>

そしてここにjsコードがあります：

$(function() {
    var icons = {
        header: "ui-icon-circle-arrow-e",
        headerSelected: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true
    });
    $( "#header1" ).click(function() {
        $( "#accordion" ).accordion( "option", "icons", false );
    }, function() {
        $( "#accordion" ).accordion( "option", "icons", icons );
    });
});​

セクション1をクリックすると、アコーディオンは正しく開きますが、他のアイテムをクリックすると、以前に開いたアイテムは閉じません。どうすればこの動作を取得できますか？ありがとう

4

4 に答える 4

9

この種の目的で jquery アコーディオンを使用しないでください。ただし、要素イベントの動作をオーバーライドするのは比較的簡単です。アコーディオンが初期化されたら、クリック ハンドラを対応する要素にオーバーライドするだけです。

あなたの場合、これは次のようなものを与えます：

$('#accordion .accClicked')
        .off('click')
    .click(function(){
        $(this).next().toggle('fast');
    });​

動作中の jsFiddleを参照してください

于 2012-10-29T10:27:43.977 に答える
2

アコーディオンはおそらく使用するのに最適なプラグインではないことに同意しますが、次のことができます。

id の使用から変更して、アコーディオンをクラスとして使用し、複数の div を使用してセクションを分割することができます。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
      $(function() {
        $( ".accordion" ).accordion({collapsible: true, active: false});
      });
</script>
<div class="accordion">
  <h3>header 1</h3>
  <p>this is my content 1</p>
</div>

<div class="accordion">
  <h3>header 2</h3>
  <p>this is my content 2</p>
</div>

于 2014-11-09T04:12:09.033 に答える
0

$(".xyz").accordion({ collapsible: true,
active: false, heightStyle: "content", icons:"", });

于 2013-01-26T19:02:15.853 に答える