如何在另一个手风琴内部动态地创建一个手风琴

如果手风琴中嵌套了手风琴，我无法获得整个手风琴。如何在另一个手风琴内部动态地创建一个手风琴

这是我的完整的例子：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1" import="java.util.*, com.as400samplecode.util.*"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>SSSS</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"> 
    <script type="text/javascript"> 

    var xmldocu = '<categories><category id="2" name="Pepsi" ><products><product id="858" name="7UP" price="24.4900" /><product id="860" name="Aquafina" price="24.4900" /></products></category><category id="4" name="Coke" ><products><product id="811" name="ThumpsUp" price="24.4900" /><product id="813" name="Maaza" price="24.4900" /></products></category></categories>' ; 
    $(document).ready(function() { 

     $("div.accordian").accordion({ 
      autoHeight: false, 
      collapsible: true, 
      active: false, 
    }); 

     $("div.accordian").accordion({ 
      activate: function(event, ui) { 
      var selectedeleemnt = ui.newHeader.text(); 
      if(selectedeleemnt=="CoolDrinks") 
      { 

       $('#inner') 
       .html(" \ 
        <h3><a href='#'>First</a></h3><div>First</div> \ 
        <h3><a href='#'>Second</a></h3><div>Second</div> \ 
        <h3><a href='#'>Third</a></h3><div>Third</div>") 
       .accordion({ 
       autoHeight: false, 
       collapsible: true, 
       active: false, 
      }); 

      } 
      } 
      }); 

     }); 

    </script> 

</head> 
<body> 
<% 
     ArrayList<String> list = new ArrayList<String>(); 
     list.add("CoolDrinks"); 
     list.add("Snacks"); 
     list.add("Other"); 
     %> 

<div id="faqs-container" class="accordian"> 

<% 
for(String item : list) 
{ 
    %> 
    <h3><a href="#"><%=item%></a></h3> 

     <div id="inner"> 

    </div> 
    <% 
} 
%> 

</div> 
</body> 

</html>

来源

2014-05-21 Kiran

我可以请得到任何帮助？ – Kiran

#inner不需要类的accordion，如果你只是附加的HTML一样，我不会理会ç海宁追加，我只想用html()，然后链手风琴到最后：

$('#inner') 
    .html(" \ 
     <h3><a href='#'>First</a></h3><div>First</div> \ 
     <h3><a href='#'>Second</a></h3><div>Second</div> \ 
     <h3><a href='#'>Third</a></h3><div>Third</div>") 
    .accordion({ 
    autoHeight: false, 
    collapsible: true, 
    active: false, 
});

Example

Example if you want to use append

来源

2014-05-21 11:23:07 Pete

我用过你的方法，但是我不能在Accordian中显示整个内容，它出现在滚动条，请在这里看到pict http://i57.tinypic.com/2m43k08.png – Kiran

嗨皮特，点击一个手风琴元素，我捕捉该元素，并使用您的代码动态创建Accordians根据需要。但问题是，当它在该元素上点击两次时，它们将被转换为来自Accordians的文本。你能告诉我为什么。 – Kiran

对不起，正在吃午饭。你能用一个例子更新小提琴吗？ – Pete

你在做什么不处理为手风琴，因为你叫处理功能追加发生之前。您必须事后调用accordion函数以获取附加的accordion div，以便jquery生成手风琴的html，以便能够正常工作。

例如：

$('#x').click(function() { 
    $('#y').append('<div class="accordian"><h3>A3</h3><div></div></div>'); 

    $("#y").children('.accordian').accordion({ 
     autoHeight: false, 
     collapsible: true, 
     active: false, 
    }); 
});

fiddle

来源

2014-05-21 09:51:01 CME64

嗯，这只是一个调用手风琴插件所有appends已作出

新的HTML之后的事：

<div id="faqs-container" class="accordian"> 
    <h3><a href="#">ASD</a></h3> 
    <div id="inner" class="accordian"> 

    </div> 
</div>

新的jQuery：

$("#inner") 
    .append("<h3><a href='#'>First</a></h3><div>First</div>") 
    .append("<h3><a href='#'>Second</a></h3><div>Second</div>") 
    .append("<h3><a href='#'>Third</a></h3><div>Third</div>"); 

$("div.accordian").accordion({ 
    autoHeight: false, 
    collapsible: true, 
    active: false, 
});

为了获得相同的CSS设计的小提琴，你将不得不在您head标签像这样的jQuery UI的CSS文件：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

而且这里是一个演示Fiddle

来源

2014-05-21 10:23:32

非常感谢，我如何使用jsfiddle使用的相同的css文件，因为我以不同的方式获得了它。 – Kiran

您将不得不包含jQuery-UI CSS文件，我将更新我的答案以包含该项以及 –

尽管我使用了提供的css文件，但它并未反映到js小提琴中存在的CSS，我更新了我的问题，你可以告诉我为什么吗？ – Kiran

如何在另一个手风琴内部动态地创建一个手风琴

回答

相关问题