0

出于某种原因，我无法使用存储在数据活动属性中的数据激活手风琴面板？

我的 HTML 看起来像这样（在它变成手风琴并添加了所有类之后）：

<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'))

4

1 回答 1

3

返回的值的类型.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”时才处于活动状态。存在/值的任何其他组合都不会打开窗格。

编辑：

忽略第二个示例，因为“活动”选项接受基于 0 的整数，正如 OP 指出的那样。我认为它出于某种原因接受了真/假。

于 2013-03-26T13:59:17.723 回答