0

私はアコーディオンを持っており、パネルが開かれると、サーバーから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>
4

1 に答える 1