Question

如果手风琴中嵌入了Accordions，我无法获得整个手风琴。

这是我的完整示例：

<%@ 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>

Answer 1

您正在做的事情不是作为手风琴处理的，因为您在附加发生之前调用了处理函数。你必须为附加的accordion div调用accordion函数，以便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

Answer 2

嗯，这只是在所有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

Answer 3

#inner不需要accordion类，如果您只是添加html，我就不会在追加附加内容，我只会使用{{1}然后将手风琴链接到最后：

html()

Example

Example if you want to use append

如何在Another Accordion中动态创建Accordion

3 个答案: