Добавить элементы аккордеона jQuery UI динамически

Как добавить элементы в аккордеон jQuery UI динамически?
Для базового аккордеона работает $("#accordion").accordion('destroy').accordion();, но у меня есть набор атрибутов, а также сортировка.Добавить элементы аккордеона jQuery UI динамически

<html> 
<head> 
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css' rel='stylesheet' type='text/css'/> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>  
</head> 
<body> 

<script> 
$(function() 
{ 
    $("#accordion") 
     .accordion({ 
      header: "> div > h3", 
      active:false, 
      collapsible:true 
     }).sortable({ 
      axis: "y", 
      handle: "h3", 
      stop: function(event, ui) { 
       // IE doesn't register the blur when sorting 
       // so trigger focusout handlers to remove .ui-state-focus 
       ui.item.children("h3").triggerHandler("focusout"); 

       // Refresh accordion to handle new order 
       $(this).accordion("refresh");    
      } 
     }); 
}); 
</script>  

<div id="accordion"> 
    <div class="group"> 
     <h3>Section 1</h3> 
     <div> 
      <p>Content 1</p> 
     </div> 
    </div> 
    <div class="group"> 
     <h3>Section 2</h3> 
     <div> 
      <p>Content 2</p> 
     </div> 
    </div> 
    <div class="group"> 
     <h3>Section 3</h3> 
     <div> 
      <p>Content 3</p> 
     </div> 
    </div> 
    <div class="group"> 
     <h3>Section 4</h3> 
     <div> 
      <p>Content 4</p> 
     </div> 
    </div> 
</div> 

<a href="javascript:;" id="btn-AddItem">Add New Item</a> 

<script> 
$(document).ready(function() 
{ 
    $("#btn-AddItem").on("click", function() 
    { 
     $("#accordion").append('<div class="group"><h3>New Section</h3><div><p>New Content</p></div></div>'); 
     //$("#accordion").accordion('destroy').accordion(); 
    }); 
}); 
</script>  

</body> 
</html>

источник

2016-05-19 anjanesh

это поможет? http://jsfiddle.net/a6rCu/57/ – user2517200

Вы можете добавить элемент затем refresh свой аккордеон:

$('#accordion').append(html); 
$('#accordion').accordion("refresh");

источник

2016-05-19 10:30:18

Добавить элементы аккордеона jQuery UI динамически

ответ

Смежные вопросы