jQuery 手風琴問題

Question

我正在嘗試根據幻燈片打開一些 DIV 使用 jQuery UI。 我希望鏈接位於其他位置，並根據其 ID 定位特定的 DIV。 我將如何 go 這樣做？ 有什么提示可以為我指明正確的方向嗎？

有點像這樣：

<script>
    jQuery().ready(function() {
        jQuery("#accordion" ).accordion({ 
            collapsible: true, 
            active: false, 
            navigation: true 
        });
    });
</script>

和：

<h3><a href="#1">Section 1</a></h3>
<h3><a href="#2">Section 2</a></h3>
<h3><a href="#3">Section 3</a></h3>
<h3><a href="#4">Section 4</a></h3>

<div id="accordion">
    <div id="1">
        <p>content</p>
    </div>
    <div id="2">
        <p>content</p>
    </div>
    <div id="3">
        <p>content</p>
    </div>
    <div id="4">
        <p>content</p>
    </div>
</div>

Answer 1

您可以使用激活方法。

簽名：

.accordion( "activate" , index )

以編程方式激活 Accordion 的內容部分。 索引可以是一個零索引的數字來匹配 header 的 position 以關閉或匹配一個元素的 Selector。 傳遞 false 以關閉所有（僅適用於 collapsible:true）。

使用$(link).click(function(){})購買，您可以 select 被點擊元素的 id 並將 id 傳遞到激活方法的索引中，如：

.accordion( "activate" , "#" + id);

Answer 2

你想要看起來更像這樣的東西。

<div id="accordion">
    <h3><a href="#1">Section 1</a></h3>    
    <div id="1">
        <p>content</p>
    </div>
    <h3><a href="#2">Section 2</a></h3>
    <div id="2">
        <p>content</p>
    </div>
    <h3><a href="#3">Section 3</a></h3>
    <div id="3">
        <p>content</p>
    </div>
    <h3><a href="#4">Section 4</a></h3>
    <div id="4">
        <p>content</p>
    </div>
</div>

Answer 3

當單擊頁面上的其他位置時，您正在嘗試使手風琴上下滑動？ 如果你是那么我只會調用你想要點擊的手風琴標題的點擊事件。

例如，使用以下手風琴標記：

<a href='' id='activateAccordion' />

<div id="accordion">
    <h3><a href="#section1">Section 1</a></h3>    
    <div id="section1">
        <p>content</p>
    </div>
    <h3><a href="#section2">Section 2</a></h3>
    <div id="section2">
        <p>content</p>
    </div>
</div>

單擊鏈接“activateAccordion”時，您可以使第 1 部分向下滑動，如下所示：

$('#activateAccordion').click(function() {
    $('a ##section1').click();
});

Answer 4

這是解決方案的jsfiddle 。

稍作修改的 HTML：（注意class和href屬性）：

<h3><a class='acc-link' href="#1">Section 1</a></h3>
<h3><a class='acc-link' href="#2">Section 2</a></h3>
<h3><a class='acc-link' href="#3">Section 3</a></h3>
<h3><a class='acc-link' href="#4">Section 4</a></h3>

<div id="accordion">
    <h3 id="1"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="2"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="3"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="4"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
</div>

JS 使用activate方法：

jQuery().ready(function() {
    var acc = $("#accordion").accordion({
            collapsible: true,
            active: false,
            navigation: true
    });

    $('.acc-link').click(function () {
        acc.accordion("activate", $(this).attr('href'));
    });
});

需要注意的一點：傳遞給activate方法的href屬性參數被解釋為 CSS 選擇器，它方便地（巧合地）以#選擇器開頭，因此它“只適用於”任何有效的 ID。