Не мога да си взема цялото акордеон, ако има вложени аКорорди в него.
Това е моят пълен пример:
<%@ 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>
Отговори:
1 за отговор № 1#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,
});
Пример, ако искате да използвате приложете
1 за отговор № 2
това, което правите, не се обработва катоако се обадихте на функцията за обработка преди пристигането. след това трябва да се обадите на акордеонската функция за приложеното акордеон 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,
});
});
1 за отговор № 3
Е, това е просто въпрос на призоваване на приставката акордеон след всичко 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 дизайн като в циферблата, ще трябва да включите jQuery UI CSS файла във вашия head маркер така:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
И тук е демонстрация цигулка