Question

我试图在用户点击按钮时动态地将项目附加到嵌套的手风琴。我使用以下代码创建嵌套的手风琴：

  $(".accordion").accordion({
  collapsible: true, 
  autoHeight: false, 
  animated: 'swing',
  heightStyle: "content",
  changestart: function(event, ui) {
      child.accordion("activate", false);
  }
});

var child = $(".child-accordion").accordion({
  active:false,
  collapsible: true, 
  autoHeight: false,
  animated: 'swing'
});

为了做到这一点，我发现我需要使用以下内容刷新手风琴：

$('.accordion').accordion("refresh");

我的问题是，当我尝试使用以下方法刷新内部手风琴时

$('.child-accordion').accordion("refresh");

我得到以下内容：错误：在初始化之前无法调用accordion上的方法;试图调用方法'刷新'

当我检查应该刷新的div时，它有以下id / classes：

DIV#shelf0sections.child-accordion.ui-accordion-content.ui-helper-reset.ui-...

我尝试使用选择器：

$('#shelf0sections .child-accordion').accordion("refresh");

相反，它不会给出错误，但在视觉上没有任何反应。

jsFiddle：http://jsfiddle.net/Mw9SA/3/ （注意，列表中的第一个元素只是看到嵌套手风琴工作的一个例子，如果你试图向它添加部分，它将无法工作。使用'+ Shelf'按钮，然后打开新的手风琴并使用'+ Section'按钮。）

Answer 1

更模块化的方法怎么样？

小提琴或它没有发生：http://jsfiddle.net/Varinder/24hsd/1/

<强>解释

这个想法是（相同的）动态创建一个全新的手风琴元素，附加正确的事件并附加在DOM中的某个地方。

在DOM的某个地方HTML中抽象转发器template标记，并使用JS引用它而不是从字符串构建它，这通常更容易管理。

标记中的手风琴模板：

<div class="template">
    <div class="accordion">
        <h3 class="accordion-title">accordion title</h3>
        <div class="accordion-content">
            accordion content
        </div>
    </div>
</div>

下面是完整的HTML标记 - 以防万一：

<div class="page">
</div>

<div id="addShelf" class="button">+ Shelf</div>
<div id="addSection" class="button">+ Section</div>

<div class="template">
    <div class="accordion">
        <h3 class="accordion-title">accordion title</h3>
        <div class="accordion-content">
            accordion content
        </div>
    </div>
</div>

<强> JS

首先存储不同的手风琴配置：

var shelfConfig = {
    collapsible: true, 
    autoHeight: false, 
    animated: "swing",
    heightStyle: "content"
}

var shelfSectionConfig = {
    active:false,
    collapsible: true, 
    autoHeight: false,
    animated: "swing"
}

如果您需要移除手风琴架的功能，可以使用当前手风琴号码和当前手风琴乐段编号（最后一个手风琴内的乐段数量）的音轨可能会派上用场

var currentShelfNumber = 0;
var currentShelfSectionNumber = 0;

追踪DOM元素，请注意对tempalte div

的引用

var $page = $(".page");
var $accordionTemplate = $(".template").children();

var $addSection = $("#addSection");
var $addShelf = $("#addShelf");

创建一个辅助函数，它只是从DOM返回一个克隆的手风琴模板副本

function getAccordionTemplate() {
     return $accordionTemplate.clone();   
}

主要功能generateAccordion - 它需要两个参数，accordionNumber在标题等中附加当前数字，accordionType以找出要使用的手风琴配置。

使用这些参数，它将返回一个品牌打击新手风琴，附带适当的事件，然后可以附加到DOM

function generateAccordion( number, accordionType ) {
    var $accordion = getAccordionTemplate();
    var accordionTitle = "twerking bieber?";

    if ( accordionType == "shelf" ) {
        accordionTitle = "Shelf " + number;    
    } else {
         accordionTitle = "Shelf Section";
    }

    $accordion.find("h3").text( accordionTitle );

    var $accordionWithEvents = attachAccordionEvents( $accordion, accordionType );

    return $accordionWithEvents;
}

请注意另一个函数attachAccordionEvents的调用顾名思义 - 这个家伙会将事件附加到手风琴元素。

function attachAccordionEvents( $accordionElement, accordionType ) {
    if ( accordionType == "shelf" ) {
        $accordionElement.accordion( shelfConfig );
    } else {
        $accordionElement.accordion( shelfSectionConfig );    
    }

    return $accordionElement;
}

另一个辅助函数，确保“添加部分”按钮不会出现，如果没有可以使用的手风琴架

function manageSectionButton() {
    if ( $page.children().length > 0 ) {
        $addSection.show();
    } else {
        $addSection.hide();
    }
}

最终的事件和逻辑：

$addShelf.on("click", function(e) {
    e.preventDefault();

    var newShelfNumber = currentShelfNumber + 1;
    var $shelfElement = generateAccordion( newShelfNumber, "shelf" );

    currentShelfNumber = newShelfNumber;

    $page.append( $shelfElement );


    manageSectionButton();
});

$addSection.on("click", function(e) {
    e.preventDefault();

    var newShelfSectionNumber = currentShelfSectionNumber + 1;
    var $shelfSectionElement = generateAccordion( newShelfSectionNumber, "section" );
    var $activeShelfElement = $page.children().last().find(".accordion-content");

    $activeShelfElement.append( $shelfSectionElement );
});

......那就是它。

希望这有帮助，

干杯

在动态创建的嵌套手风琴中刷新子项

1 个答案: