JQuery UI Accordion 中的嵌套 asp TreeView 应该在展开时触发事件答案

【问题标题】：Nested asp TreeView in JQuery UI Accordion should fire event on expandJQuery UI Accordion 中的嵌套 asp TreeView 应该在展开时触发事件
【发布时间】：2017-09-05 13:45:08
【问题描述】：

我在左侧有一个导航 iFrame，我想在 asp:TreeNode (ClientExpand) 上触发 $("#accordion").accordion("refresh"); 事件，这样嵌套的 asp:TreeView 的高度将决定被包围的 DIV 的高度JQuery UI Accordion 的 Accordion 选项卡。

有没有办法使用客户端 javascript $("#accordion").accordion("refresh"); 对扩展的 asp:TreeView 做出反应？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigationTree.aspx.cs" Inherits="NavigationTree" %>
<!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 runat="server">
        <title></title>
        <script type="text/javascript" src="js/displayToc.js"></script>
        <style type="text/css">
            .treeNode
            {
                color:#666;
                font-family:Arial,Helvetica,sans-serif;
                font-size: 13px;
            }
            .rootNode
            {
                color:#666;
                font-family:Arial,Helvetica,sans-serif;
                font-size: 13px;
            }
            .leafNode
            {
                color:#666;
                font-family:Arial,Helvetica,sans-serif;
                font-size: 13px;
            }
        </style>    

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="../Scripts/jquery-ui.js"></script>

        <script type="text/javascript">

            var zuletztSelektiert = '';

            $(function () {

                var treeView1 = $('#<%= TreeView1.ClientID %>');
                var treeNodes = treeView1.find('div[id$=Nodes]');
                var treeImages = treeView1.find('img').not('img[alt=\'\']');

                $("#searchField").keydown(function (e) {
                    if (e.keyCode == 13) {
                        $("#btnSearch").click();
                        e.preventDefault();
                    }
                });

                $("#btnSearch").click(function (event) {

                    var meineLinkTexte = '';
                    var parentEls = '';

                    treeNodes.css({ 'display': 'none' });
                    treeImages.attr('src', 'images/plus.gif')

                    $("a").each(function () {
                        //Do your work   
                        var selectedElement = $(this).attr('id');
                        $("#" + selectedElement).css({ 'background-color': '#FFFFFF' });
                        if ($(this).text().toLowerCase().indexOf($("#searchField").val().toLowerCase()) > -1) {

                            $("#" + selectedElement).parents("[id$='Nodes']").css({ 'display': 'block' });
                            $("#" + selectedElement).css({ 'background-color': '#DEDEDE' });

                            meineLinkTexte += $(this).attr('id') + '';
                        }
                    })

                    event.preventDefault();
                });

                $("[id*=TreeView1] input[type=checkbox]").bind("click", function () {

                    var selectedStereoType = $.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1));
                    //return;

                    var isChecked = $(this).is(":checked");

                    if (isChecked) {
                        //zuletztSelektiert = zuletztSelektiert + $(this).next().text();
                        zuletztSelektiert = zuletztSelektiert + selectedStereoType;
                    }
                    else {
                        //zuletztSelektiert = zuletztSelektiert.replace($(this).next().text(), '');
                        zuletztSelektiert = zuletztSelektiert.replace(selectedStereoType, '');
                    }

                    if (zuletztSelektiert != '') {
                        // Welcher Stereotyp ist selektiert?
                        //var stereotype = zuletztSelektiert.substring(zuletztSelektiert.indexOf('«') + 1, zuletztSelektiert.indexOf('»'));
                        var stereotype = selectedStereoType;
                        var letzteMeldung = '';

                        $("[id*=TreeView1] input[type=checkbox]").each(function () {
                            //var currentStereotype = $(this).next().text().substring($(this).next().text().indexOf('«') + 1, $(this).next().text().indexOf('»'));
                            var currentStereotype = $.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) );

                            if (currentStereotype != stereotype) {
                                var isChecked2 = $(this).is(":checked");

                                if (isChecked2) {
                                    $(this).removeAttr("checked");
                                    zuletztSelektiert = zuletztSelektiert.replace($.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) ), '');

                                    letzteMeldung='It is not possible to select elements of different stereotypes. \n\n Selected Items: ' + zuletztSelektiert;
                                }
                            }

                        });

                        if (letzteMeldung != '') alert(letzteMeldung);

                    }
                });

                $("#accordion").accordion({
                    collapsible: true,
                    heightStyle: "fill"
                });

            })

            function deselectAll() {
                $("[id*=TreeView1] input[type=checkbox]").removeAttr("checked");
            }
        </script>
    </head>
    <body onload="tocInit();">
        <form id="form1" runat="server">
        <div>
            <div id="accordion">
                <h3>Navigation Tree</h3>
                <div>
                    <asp:TextBox ID="searchField" runat="server"  />
                    <asp:Button ID="btnSearch"  runat="server" Text="Search" />
                    <asp:TreeView ID="TreeView1" 
                            NodeStyle-CssClass="treeNode"
                            RootNodeStyle-CssClass="rootNode"
                            LeafNodeStyle-CssClass="leafNode" 
                            runat="server">
                    </asp:TreeView>
                </div>
                <h3>Views</h3>
                <div>
                    <p>
                        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Width="210px" /> <br />
                        <asp:Label ID="Label1" runat="server"></asp:Label><br/>
                    </p>
                </div>
            </div>
        </div>
        </form>
    </body>
</html>

【问题讨论】：

标签： jquery-ui treeview client-side jquery-ui-accordion expand

【解决方案1】：

看起来我得到了我正在寻找的行为

    $("#accordion").accordion({
        collapsible: true,
        heightStyle: "content"
    });

【讨论】：