2013-04-08 85 views
0

我有一個手風琴,我正在動態創建新元素。但是,當我這樣做時,我似乎無法獲得最新的默認打開元素。它始終是第一個元素。添加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}); 
     } 
+0

何時添加手風琴元素。在您調用.accordion()後,您可能會添加動態手風琴元素。 – Garrett 2013-04-08 21:27:12

回答

1

建議使用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/