我有一个手风琴,当打开一个面板时,它会从服务器获取 html,并将其呈现为手风琴作为前一个手风琴的子级。当我单击子手风琴时,它会触发父 onactivate 事件
@model IEnumerable<String>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font: normal 13px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable
{
width: 1400px;
padding: 0;
margin: 0;
}
th {
font: bold 13px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 3px 3px 3px 6px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
</style>
</head>
<body>
@Html.Hidden("SelectedDate", ViewData["SelectedDate"])
@using (Html.BeginForm())
{
@Html.TextBox("DateSelector", "", new { style = "display:table-cell; width:90%", @id = "DatePicker" })
<input type="submit" value="Get"/>
<br />
<div id="Nxts" class="accordion">
@foreach (var nxtFileName in Model)
{
<h3>@*<img src="@if (item.ExtractedSuccessfully()){<text>../../Images/GreenTick.png</text>} else{<text>../../Images/RedCross.png</text>}"/>*@ @nxtFileName </h3>
<div></div>
}
</div>
}
</body>
</html>
<script src="../../Scripts/jquery-1.9.1.js"></script>
<script src="../../Scripts/jquery-ui-1.10.1.js"></script>
<link rel="stylesheet" href="../../CSS/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$("#DatePicker").datepicker();
});
function PopulatePanel(selectedPanel, NxtFileLocation,Date) {
$.ajax({
url: '@Url.Action("ExtractedXMLFiles", "Summary")',
type: 'POST',
async: true,
data: { "NxtFileLocation": NxtFileLocation, "Date": Date },
success: function (result) {
selectedPanel.append(result);
SetupAccordion();
}
});
}
function SetupAccordion() {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content"
});
}
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false
});
$("#Nxts").on("accordionactivate", function (event, ui) {
if (ui.newPanel.length > 0) {
if (ui.newPanel.html() == "") {
var date = $('#SelectedDate').val();
var active = $("#Nxts").accordion("option", "active");
var text = $.trim($("#Nxts h3").eq(active).text());
PopulatePanel(ui.newPanel, text, date);
}
}
});
});
</script>