添加手风琴窗格，手风琴不工作

我可以动态添加新的手风琴窗格，但它们不起作用。有任何想法吗？我假设他们没有被初始化，因为他们正在动态添加。当我添加它们时，它们显示出来，它们不会变成动画。添加手风琴窗格，手风琴不工作

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>MLE Editor</title> 
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 

    <link href="Styles/site.css" rel="stylesheet" type="text/css" />  

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     //Add Inactive Class To All Accordion Headers 
     $('.eventHeader').toggleClass('inactive-header'); 

     //Set The Accordion Content Width 
     var contentwidth = $('.eventHeader').width(); 
     $('.eventContent').css({ 'width': contentwidth }); 

     //Open The First Accordion Section When Page Loads 
     //$('.eventHeader').first().toggleClass('active-header').toggleClass('inactive-header'); 
     //$('.eventContent').first().slideDown().toggleClass('open-content'); 

     // The Accordion Effect 
     $('.eventHeader').click(function() { 
      if($(this).is('.inactive-header')) { 
       $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
       $(this).toggleClass('active-header').toggleClass('inactive-header'); 
       $(this).next().slideToggle().toggleClass('open-content'); 
      } 

      else { 
       $(this).toggleClass('active-header').toggleClass('inactive-header'); 
       $(this).next().slideToggle().toggleClass('open-content'); 
      } 
     }); 

     return false; 
    }); 

    function addEvent() { 
     var eventsContainer = document.getElementById('eventsContainer'); 
     var events = eventsContainer.innerHTML; 
     events = events + '<h2 class="eventHeader">New event</h2><div class="eventContent"><p>Event options</p></div>'; 
     eventsContainer.innerHTML = events; 
    } 
</script> 
</head> 
<body> 
    <form id="form1" runat="server">   
     <div id="eventOptions"> 
      <a href="javascript:addEvent();">Add Event</a> 
      <br /> 
      <div id="eventsContainer"> 
      <h2 class="eventHeader">Old event</h2><div class="eventContent"><p>Event options</p></div> 
      </div> 
     </div> 
    </form> 
</body> 
</html>

来源

2012-09-12 Chris Whisenhunt

你是否通过AJAX动态添加它们？如果是这样，您需要查看http://api.jquery.com/on/ –

获得手风琴上新项目的工作，只需单击处理更改为：

$(document).on('click','.eventHeader',function() { 
    if($(this).is('.inactive-header')) { 
    $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
    $(this).toggleClass('active-header').toggleClass('inactive-header'); 
    $(this).next().slideToggle().toggleClass('open-content'); 
    } 

    else { 
    $(this).toggleClass('active-header').toggleClass('inactive-header'); 
    $(this).next().slideToggle().toggleClass('open-content'); 
    } 
});

来源

2012-09-12 14:31:56 vonflow

我会建议以获得最佳效果摧毁，然后动态添加项目时重新创建手风琴。

来源

2012-09-12 14:33:35

在新版本中调用.accordian（'refresh'） –

添加手风琴窗格，手风琴不工作

回答

相关问题