添加jQuery Accordion元素时，需要新元素默认打开

问题描述：

我有一个手风琴，我正在动态创建新元素。但是，当我这样做时，我似乎无法获得最新的默认打开元素。它始终是第一个元素。添加jQuery Accordion元素时，需要新元素默认打开

想法？

这里的HTML：

<asp:MultiView ID="MainView" runat="server"> 
     <asp:View ID="View1" runat="server"> 
      <table style="width: 100%; border-width: 3px; border-color: #C4F691; border-style: solid"> 
       <tr> 
        <td> 
         <div class="rowClassSpace"> 
          &nbsp;</div> 
         <div id="accordion"> 
          <a href="#">Make/Model (Insured Vehicle)</a> 
           <div> 
            <p> 
             Content 
            </p> 
           </div> 
         </div> 
         <div> 
          <button id="addAccordion"> 
           Add Another Vehicle</button> 
          </div> 
        </td> 
       </tr> 
      </table> 
     </asp:View> 
    </asp:MultiView>

这里的JS：

// Initialize accordion 
    $(document).ready(function() { 
     $(function() { 
     $("#accordion").accordion(); 
     }); 
    }); 

    // Adding according sections 
    $('#addAccordion').click(function() { 
    }); 

    function addAccordion() { 
     var active = $('#accordion').accordion('option', 'active'); 
     $('#accordion').append('<a href="#">Make/Model (Other Car #)</a><div><p>New data</p></div>').accordion('destroy').accordion({ active: active}); 
     }

何时添加手风琴元素。在您调用.accordion（）后，您可能会添加动态手风琴元素。 – Garrett 2013-04-08 21:27:12

答

建议使用destroy方法来破坏现有的，然后追加新的部分，然后初始化新的手风琴实例。此外标记使用的是使用<a>标签

通过计算现有的部分似乎很奇怪在添加新的一个，然后才能将active指数设定为段数，以便添加最新的区间将被打开

var template=function(ctr){ 
    /* using html markup per docs*/ 
    return '<h3>Section '+ctr+'</h3><div>Content '+ctr+'</div>'; 
}; 

var accordOptions={ 
    collapsible:true, 
    active:0 
}; 
var $accord=$('#accordion').accordion(accordOptions); 

$('button').click( addSection); 

function addSection(){ 
    var num_sections=$accord.children('h3').length; 
    /* set active index to number of current sections*/ 
    accordOptions.active=num_sections; 
    $accord.accordion('destroy') 
      .append(template(num_sections +1)) 
      .accordion(accordOptions); 
}

DEMO ：http://jsfiddle.net/HnVqD/

添加jQuery Accordion元素时，需要新元素默认打开

相关推荐