jQuery手风琴问题

编程问答 2022-04-26

问题描述

| 我正在尝试根据幻灯片打开一些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>
    

解决方法

您可以使用activate方法。 签名： 
.accordion( \"activate\",index )
以编程方式激活手风琴的内容部分。索引可以是零索引的数字以匹配要关闭的标题的位置，也可以是与元素匹配的选择器。传递false以关闭所有内容（仅可通过collapsible：true启用）。 使用
$(link).click(function(){})
购买，您可以选择点击元素的ID，然后 将id传递给activate方法的索引，例如： 
.accordion( \"activate\",\"#\" + id);
    ,您想要看起来更像这样的东西。 
<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>
    ,当您在页面的其他位置单击时，您正在尝试使手风琴上下滑动吗？如果是，那么我只想调用您想要单击的手风琴标题的click事件。 例如，使用以下手风琴标记： 
<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();
});
    ,这是解决方案的一个技巧。 稍作修改的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。     
jquery手风琴问题问题