Я не можу отримати всю акордеону, якщо в ній є вкладені аккордеони.
Це мій повний приклад:
<%@ 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">
І ось демонстрація Скрипка