0

アコーディオンタブに関する質問があります。

私はアコーディオンメニュープラグインを使用しました。以下のコードは、ページのタブに使用しました。

  [accordions]
  [accordion title ="about"]**Content 1** [/accordion ]
  [accordion title="Home"]**Content 2** [/accordion ]
  [/accordions]

Webページは次のようになります。

ここに画像の説明を入力してください

まず、これらのタブを両方とも折りたたんで、[概要]をクリックすると、コンテンツが展開されて表示されます。[ホーム]をクリックすると、[概要]タブが折りたたまれ、ホームページが展開されます。

jqueryによって私はこれを達成することができますが、どのスクリプトをダウンロードして操作するかわかりません。

何か案は？？前もって感謝します

4

2 に答える 2

0

jQuery UIアコーディオンを使用する場合は、アコーディオンに簡単なイベントを追加できます。

またはイベントを追加します：

$( ".selector" ).bind( "accordioncreate", function(event, ui) {
  $( ".selector" ).accordion( "option", "active", -1 )
});
于 2012-07-16T12:27:04.000 に答える
0

単純なアコーディオンには2つの異なる方法があります。1つ目は閉じるボタン、2つ目はホバートリガー付きです。

1）閉じるボタンを使用したJsFiddleの例を次に示します。

jQuery：

$('.content').slideUp(400);//reset panels

$('.panel').click(function() {//open
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(400);
                             //show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takeID = $(this).attr('id').replace('Close','');
   //strip close from id = 1second
    $('#'+takeID+'C').slideUp(400);//hide clicked close button's panel
});​

html：

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>
<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>
<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

-------

2 ）ホバートリガーを使用したJsFiddleの例は次のとおりです。

$('.panel').hover(function() {
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('.content').stop(false,true).slideUp(400);//close
   //used stop for prevent conflict
   $('#'+takeID+'C').stop(false,true).slideDown(400);//open
   //show's clicked ele's id macthed div
});​
于 2012-07-16T12:32:08.383 に答える