Question

我在jquery中创建了一个下拉表，但是当我在浏览器中运行它时它处于展开状态。当我第一次打开桌子时，我希望桌子处于折叠状态。你可以帮我解决一下这个错误吗？请建议对代码进行一些更改。

    (function($){
        $.fn.jExpand = function(){
            var element = this;

            $(element).find("tr:odd").addClass("odd");
            $(element).find("tr:not(.odd)").hide();
            $(element).find("tr:table").show();

            $(element).find("tr.odd").click(function() {
                $(this).next("tr").toggle();
            });

        }    
    })(jQuery); 

     $(document).ready(function(){
                $("#report tr:odd").addClass("odd");
                $("#report tr:not(.odd)").hide();
                $("#report tr:table").show();

                $("#report tr.odd").click(function(){
                    $(this).next("tr").toggle();
                    $(this).find(".arrow").toggleClass("up");
                });
                //$("#report").jExpand();
            });

<table id="report">
        <tr>
            <th>Notices</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td>January</td>
            <td></td>
            <td></td>
            <td></td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <table>
                <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
                </table>
</table>

Answer 1

您发布的标记未正确嵌套，但可能就是您发布它们的方式。无论如何，复核不会受到伤害。由于内表在内表关闭后位于td内，因此在外表关闭之前需要</td></tr>。

其次，您正在使用引发$("#report tr:table").show();的{{1}}代替您使用：

unsupported pseudo: table

jsfiddle

<强> ==

编辑：

修改了代码，使其仅显示外部.odd行并在单击时展开：

$("#report tr").find("table").closest("tr").show();

updated jsfiddle

下拉菜单以展开状态开始

1 个答案: