1

私のアコーディオングリッドがある特定のページにリンクしているいくつかのページからのリンクがあります。また、ページの読み込み時に、アコーディオン グリッドのターゲット部分がユーザーに対して自動的に折りたたまれるようにします。

たとえば、ページ A とページ B があります。ページ A は、ユーザーがページ B で何かを表示するためにアクセスする場所です。ページ B には、4 つの部分 (例: 1、2、3、および 4) を持つアコーディオンがあります。ユーザーがページ A からページ B へのリンク 2 をクリックすると、アコーディオンの 2 番の部分が折りたたまれてユーザーに表示されます。

コードの下を見つけます：

HTML: 

<div id="accord_bar">
<ul id="accordion">
<li><a href="#recent" class="heading">Number 1 Header</a>
<ul id="recent"><li>Number 1</li></ul>
</li>
<li><a href="#popular" class="heading">Number 2 Header</a>
<ul id="recent"><li>Number 2</li></ul>
</li>
<li><a href="#categories" class="heading">Number 3 Header</a>
<ul id="recent"><li>Number 3</li></ul>
</li>
<li><a href="#archive" class="heading">Number 4 Header</a>
<ul id="recent"><li>Number 4</li></ul>
</li></ul></div>

HEAD タグ内の Javascipt:

<script type="text/javascript">
$(document).ready(function() {
    $('#accordion').accordion(
    {active: "a.default", header: "a.heading"}
    );
});

リンクされたアコーディオン Jquery ファイル:

<script type="text/javascript" src="js/jquery-ui-accordion.js"></script>

私は本当にこれをできるだけ早く修正する必要があり、誰かが助けてくれればとても感謝しています...

4

1 に答える 1

0

jQuery を使用して独自の単純なアコリオンを構築できます。UI は必要ありません。

eq()この単純なアコーディオン構造のメソッドを使用して、アコーディオンの特定の部分を折りたたむため。

これは、ホバートリガーを備えたjsFiddleです。

jQuery:

$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion

$('.panel').hover(function() {//open
    var takeID = $(this).attr('id');//takes id from clicked ele
    $('.content').stop(false,true).slideUp(600);
    //used stop for prevent conflict
    $('#'+takeID+'C').stop(false,true).slideDown(600);
    ///show's hovered ele's id macthed div
});​

html:

<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1</div>

<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2</div>

<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3</div>

----------

これは、クリックトリガーと閉じるボタンを備えたjsFiddleです。

jQuery:

$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion

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

html:

<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1<span id="panel1Close">X</span></div>

<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2<span id="panel2Close">X</span></div>

<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3<span id="panel3Close">X</span></div>

注：以前にこの回答に関連するアコーディオンに回答しました： タブの折りたたみと展開 jquery / simple accordion

于 2012-08-29T08:34:53.510 に答える