Question

我正在尝试使用jQuery UI根据幻灯片打开一些DIV。我希望链接位于其他位置，并根据其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

您可以使用activate方法。

签名：

.accordion( "activate" , index )

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

使用$(link).click(function(){})购买，您可以选择点击元素的ID 传递activate方法的索引中的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 method：

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选择器，它方便地（并且巧合地）以#选择器开头，因此它“只使用”任何有效的身份证。

jQuery手风琴问题

4 个答案: