0

我正在使用以下代码。我使用 css 创建了两个框架。在单击 frame1 的行时，我在 frame2 中显示了一些详细信息。详细信息包含具有展开/折叠功能的列表。我也添加到 frame1 中的相同列表。我能够展开/折叠 frame1 的列表，但展开/折叠列表不适用于 frame2 列表。有什么想法吗

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('table tr').on('click', function () {
        $('#showContent').html($(this).find('.content').html()).slideDown(5000);
    });

    $('table th').on('click', function () {
        $('#showContent').html($(this).find('.content').html());
    });

    prepareList()

    function prepareList() {
    $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();
    };


});
</script>
<style>
.content {visibility:hidden; width:1px; height:1px; }
#showContent {width:80%; size:auto;}
#frame1{float:left;width:70%;overflow:auto; height:700px;}
#frame2{float:right;width:28%;height:700px;overflow:auto;}
</style>

</head>
<body>
    <div id="frame2">
         <div id="showContent"></div>
    </div>

    <div id="frame1" >
         <table  border=1 width="99%" nowrap=0;  cellspacing=0>
         <tbody>
                <th colspan="2">Result Details</th>

                <tr data-depth=0 class="collapse" height=1px >
                <td width="4%">PASS</td>
                <td width="80%">Modules
                    <ul id="expList">
                        <li>
                            Item A
                            <ul>
                                <li>
                                    Item A.1
                                    <ul>
                                        <li>
                                            Fooo
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="content">
                         <h4 align="center">Details</h4>
                         <ul id="expList">
                            <li>
                            Item A
                                <ul>
                                    <li>
                                        Item A.1
                                        <ul>
                                            <li>
                                                Fooo
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
</html>
4

0 回答 0