jQuery 手风琴问题

Question

我正在尝试根据幻灯片打开一些 DIV 使用 jQuery UI。我希望链接位于其他位置，并根据其 ID 定位特定的 DIV。我该怎么做呢？有什么建议可以指引我正确的方向吗？

有点像这样：

<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

您是否试图在单击页面上其他位置时使手风琴上下滑动？如果您是，那么我只需调用您想要单击的手风琴标题的单击事件。

例如，使用以下手风琴标记：

<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 2

这是解决方案的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'));
    });
});

需要注意的一件事：href 属性参数传递到 activate 方法中被解释为 CSS 选择器，它方便地（并且巧合地）以 # 选择器开头，因此它“仅适用于”任何有效的 ID。

Answer 3

您可以使用激活方法。

签名：

.accordion( "activate" , index )

以编程方式激活 Accordion 的内容部分。索引可以是零索引数字，以匹配要关闭的标头的位置，也可以是匹配元素的选择器。传递 false 来关闭所有（仅适用于 collapsible:true）。

使用$(link).click(function(){})购买，您可以选择被点击元素的id并
在 activate 方法的索引中传递 id，例如：

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

Answer 4

你想要看起来更像这样的东西。

<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>