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。