jQuery UI 手风琴激活

Question

我不知道如何做到这一点，或者我是否可以做到这一点。我有一个 jQuery UI Accordion，多个部分，每个部分包含多个锚标记，每个锚标记都有一个唯一的字符串 id。

我希望能够将手风琴打开到具有给定 id 的特定元素所在的位置。就像说 id“item117”。我可以使用类似

的东西吗

$('#accordion').activate('activate','#item117');

甚至

$('#accordion').activate('activate',117);

我已经尝试过这些和一些变体，但无法成功。在我试图开始工作的情况下，手风琴应该打开到第二部分的末尾。

我仍然不明白这一点，所以也许我还做错了其他事情。我已将其精简为示例页面：http://www.ofthejungle.com/testaccordion.php 请查看它及其源代码。

Answer 1

也已经解决了这个问题并找到了很好且通用的解决方案
- 模拟点击所需项目的标题

$('#header-of-item-258').click();

随时随地都可以使用，而不仅仅是手风琴

Answer 2

来自文档：

// getter
var active = $( ".selector" ).accordion( "option", "active" );

// setter
$( ".selector" ).accordion( "option", "active", 2 );

Answer 3

对我来说有效

$("#accordion").accordion({active:"h3:last"})

Answer 4

您需要使用名为

accordion

的函数来调用它：

// Open the third set (zero based index)
$('#accordion').accordion('activate', 2);

要打开包含特定元素的部分，您可以执行类似的操作。 注意：您需要定位通常打开和关闭该部分的触发器。在文档中，这是一个

h3

元素，您的触发元素可能不同，因此请相应地更改它。

$('#accordion').accordion('activate', '#accordion > div:has(#item117) > h3');

Answer 5

这最终对我有用：

$("#accordion").accordion("activate", $("#h3-id"));

注意！！！ id 必须是您要打开的

元素的 id（在默认手风琴设置中）。

我在使用 #id 激活手风琴时遇到了同样的问题。遗憾的是我没有找到解决办法，所以我创建了一个 hack。我迭代手风琴中的

div

元素，以获得有趣的

div

的索引。看起来像这样：

acc = 'tab-you-are-interested-in';

// find corresponding accordion
act = 0;
panels = $('#accordion-element > div');
for (i=0; i<panels.length; i++) {
    if ( panels[i].id == acc ) {
        act = i;  
    }
}

$('#accordion-element').accordion('activate', act);

当您单击标题时，它是 h3 元素，它会打开下一个 div.. 这就是功能。现在，对于 activate ，您需要提供索引或元素。索引可能与您的 ID 不同。所以我会用：

$('.selector').accordion('option', 'activate', $(h3#id));

如果你有索引，你可以使用它。但是大多数情况下，如果你动态创建手风琴，那么获取 id 的索引并不容易。你可以找到这样的索引..

 var processingHeaders = $('#accordion h3');
 for (i = 0; i < processingHeaders.length; i++) {

        ids.push($(processingHeaders[i]).attr('id'));
        idsForLaterChecks.push($(processingHeaders[i]).attr('id')); 
    }

现在我有身份证了.. 使用indexOf：找到数组中的索引并使用它..

注意：// idsForLaterChecks 是全局的

使用 jQuery 1.9+：

$('#accordion').activate('activate', elementSelector);

现在是：

$('#accordion').activate('option', 'active', elementSelector);

如果你发现使用遍历方法更容易，如果你有这样的HTML：

<div id="accordion">
    <h3><a href="#">Section</a></h3>
    <div>
        <p id="#item117" class="item">
            <a class="link-active" href="">Item 117</a>
        </p>            
    </div>
</div>

试试这个：

var myh3 = $('#item117').parent().prev('h3');
$('#accordion').accordion('option', 'active', myh3);

您还可以像这样启用和禁用手风琴：

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

要重新激活该选项卡：

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

还有另一种方法。

在手风琴的每个 H3 标题标签中包含 ID="someId" 并命名该 id 的唯一性。

例如，此 id 将在系列“AccjA”中，下一个 h4 将是“AccjB”：

<h4 class="Accj" id="AccjA">
       <a href="#settings">A Fan?</a>
</h4>

然后激活您想要使用的面板：

    $('#Accjoin').accordion('activate', '#AccjoinA')

我使用了上面的超时方法，在页面加载后延迟 2 秒使用 Ben Alman 的“.doTimeout”函数来吸引用户的注意力，例如：

$.doTimeout(2000, function () {
    $('#Accjoin').accordion('activate', '#AccjoinA')
});

尝试

$('#accordion').activate('#item117');

或

$('#accordion').activate(document.getElementById('item117'));

激活手风琴的正确语法是

$(".selector").activate(var index)

其中索引是字符串、元素、布尔值、数字、JQuery

2024 年解决方案。

删除了“activate”方法，而不是使用选项名称为“active”（布尔值或整数）的“option”方法。

参考：https://api.jqueryui.com/accordion/#option-active

例如使用活动标头类初始化手风琴。

$( ".acc_selector" ).accordion({
    header: "h3", 
    collapsible: true, 
    active: (function(){
            var iact = 0;
            $('.header_selector').each(function(idx){
               if($(this).hasClass('header_selector_active')){
                  iact = idx;   
               }
            });
            return iact;
    })(),
    heightStyle: "content",
});

jquery API 是什么

激活 .

中包含的 Accordion 的第二个内容

$(".selector").activate(1)

关闭手风琴的所有内容部分。

$(".selector").activate(false)

激活与给定表达式匹配的第一个元素。

$(".selector").activate("a:first")

$('#collapseOne').collapse('toggle');

Answer 6

我在使用 #id 激活手风琴时遇到了同样的问题。遗憾的是我没有找到解决办法，所以我创建了一个 hack。我迭代手风琴中的

div

元素，以获得有趣的

div

的索引。看起来像这样：

acc = 'tab-you-are-interested-in';

// find corresponding accordion
act = 0;
panels = $('#accordion-element > div');
for (i=0; i<panels.length; i++) {
    if ( panels[i].id == acc ) {
        act = i;  
    }
}

$('#accordion-element').accordion('activate', act);

Answer 7

当您单击标题时，它是 h3 元素，它会打开下一个 div.. 这就是功能。现在，对于 activate ，您需要提供索引或元素。索引可能与您的 ID 不同。所以我会用：

$('.selector').accordion('option', 'activate', $(h3#id));

如果你有索引，你可以使用它。但是大多数情况下，如果你动态创建手风琴，那么获取 id 的索引并不容易。你可以找到这样的索引..

 var processingHeaders = $('#accordion h3');
 for (i = 0; i < processingHeaders.length; i++) {

        ids.push($(processingHeaders[i]).attr('id'));
        idsForLaterChecks.push($(processingHeaders[i]).attr('id')); 
    }

现在我有身份证了.. 使用indexOf：找到数组中的索引并使用它..

注意：// idsForLaterChecks 是全局的

Answer 8

使用 jQuery 1.9+：

$('#accordion').activate('activate', elementSelector);

现在是：

$('#accordion').activate('option', 'active', elementSelector);

如果你发现使用遍历方法更容易，如果你有这样的HTML：

<div id="accordion">
    <h3><a href="#">Section</a></h3>
    <div>
        <p id="#item117" class="item">
            <a class="link-active" href="">Item 117</a>
        </p>            
    </div>
</div>

试试这个：

var myh3 = $('#item117').parent().prev('h3');
$('#accordion').accordion('option', 'active', myh3);

Answer 9

您还可以像这样启用和禁用手风琴：

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

要重新激活该选项卡：

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

Answer 10

还有另一种方法。

在手风琴的每个 H3 标题标签中包含 ID="someId" 并命名该 id 的唯一性。

例如，此 id 将在系列“AccjA”中，下一个 h4 将是“AccjB”：

<h4 class="Accj" id="AccjA">
       <a href="#settings">A Fan?</a>
</h4>

然后激活您想要使用的面板：

    $('#Accjoin').accordion('activate', '#AccjoinA')

我使用了上面的超时方法，在页面加载后延迟 2 秒使用 Ben Alman 的“.doTimeout”函数来吸引用户的注意力，例如：

$.doTimeout(2000, function () {
    $('#Accjoin').accordion('activate', '#AccjoinA')
});

Answer 11

尝试

$('#accordion').activate('#item117');

或

$('#accordion').activate(document.getElementById('item117'));

激活手风琴的正确语法是

$(".selector").activate(var index)

其中索引是字符串、元素、布尔值、数字、JQuery

Answer 12

2024 年解决方案。

删除了“activate”方法，而不是使用选项名称为“active”（布尔值或整数）的“option”方法。

参考：https://api.jqueryui.com/accordion/#option-active

例如使用活动标头类初始化手风琴。

$( ".acc_selector" ).accordion({
    header: "h3", 
    collapsible: true, 
    active: (function(){
            var iact = 0;
            $('.header_selector').each(function(idx){
               if($(this).hasClass('header_selector_active')){
                  iact = idx;   
               }
            });
            return iact;
    })(),
    heightStyle: "content",
});

Answer 13

jquery API 是什么

激活 .

中包含的 Accordion 的第二个内容

$(".selector").activate(1)

关闭手风琴的所有内容部分。

$(".selector").activate(false)

激活与给定表达式匹配的第一个元素。

$(".selector").activate("a:first")

Answer 14

-2
投票

$('#collapseOne').collapse('toggle');

jQuery UI 手风琴激活

问题描述投票：0回答：14

14个回答

最新问题

jQuery UI 手风琴激活

问题描述 投票：0回答：14

14个回答

最新问题

问题描述投票：0回答：14