出于某种原因,我无法使用数据事件属性中存储的数据激活折叠面板?
我的 HTML 看起来像这样(在它变成 Accordion 并添加了所有类之后):
<div class="gcAccordion ui-accordion ui-widget ui-helper-reset" style="" data-active="1" role="tablist">
<h3 class="gcAccordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-0" aria-controls="ui-accordion-1-panel-0" aria-selected="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a title</h3>
<div class="gcAccordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-0" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some content</div>
<h3 class="gcAccordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-1" aria-controls="ui-accordion-1-panel-1" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a 2nd title</h3>
<div class="gcAccordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-1" aria-labelledby="ui-accordion-1-header-1" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some 2nd content</div>
<h3 class="gcAccordionTitle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-2" aria-controls="ui-accordion-1-panel-2" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a 3rd title</h3>
<div class="gcAccordionContent ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-2" aria-labelledby="ui-accordion-1-header-2" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some 3rd content</div>
</div>
Javascript:
$('.gcAccordion').accordion({
collapsible: true,
heightStyle: "content",
autoHeight: false,
active: false,
create: function(event, ui){
$('.gcAccordion').each(function(){
console.log($(this).attr('data-active'));
$(this).accordion( "option", "active", $(this).attr('data-active'));
});
}
});
console.log 调用正确地将 1 输出到日志,但由于某种原因,它没有激活第二个面板。如果我在 javascript 中使用这一行作为第 9 行,它会起作用:
$(this).accordion( "option", "active", 1);
但它不适用于数据事件属性 1 值。知道发生了什么吗?
编辑:删除了链接,因为页面不再事件,并且所有代码都在问题中。
更新:
感谢您的帮助。我需要 parseInt($(this).attr('data-active'))
最佳答案
.attr()
返回的值类型是字符串。我打赌您需要一个真/假 (0/1) 值,所以请尝试:
$(this).accordion("option", "active", +$(this).attr('data-active'));
+
一元运算符与 parseInt
类似,将字符串转换为数字,但解析不太严格,并且速度更快(我认为)。
可能更好的是:
$(this).accordion("option", "active", $(this).attr('data-active') === "1" ? 1 : 0);
仅当 data-active
属性存在且其值为“1”时,这才会导致折叠面板处于事件状态。存在/值(value)的任何其他组合都不会打开该 Pane 。
编辑:
忽略第二个示例,因为“active”选项接受基于 0 的整数,正如 OP 所指出的。我认为出于某种原因它接受 true/false。
关于javascript - 如何根据数据事件属性激活 jQuery UI Accordion?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15638924/