如何折疊頁面加載樣式的手風琴的特定部分

Question

我有幾個頁面的鏈接，這些鏈接鏈接到我的手風琴網格所在的特定頁面。 在頁面加載時，我希望手風琴網格的目標部分自動為用戶折疊。

例如：頁面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>

我真的需要盡快修復此問題，如果有人可以提供幫助，我將非常感激。

Answer 1

您可以使用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 /簡單手風琴