如何折叠页面上的展开行Load

时间:2016-02-02 13:00:59

标签: javascript jquery html

我需要你的帮助来折叠页面加载时默认出现的扩展行。这是javascript代码:

<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

  $(document).ready(function() {
    $('.RowToClick').click(function() {
      $(this).nextAll('tr').each(function() {
        if ($(this).is('.RowToClick')) {
          return false;
        }
        $(this).toggle(350);
      });
    });
  });

</script>

以下是表格标签中的tr代码,它折叠并展开了tr标签:

<tr class="RowToClick">
  <td><%=i%></td>
  <td width="20%" style="padding: 1px; cursor: pointer" title="Click Here to Expand/Collapse Sub Folders">
  <span style="text-decoration: underline"><%=sz_FolderName%></span>
  </td>
</tr>

2 个答案:

答案 0 :(得分:0)

如果你想加载它。将您需要的HTML元素放在DIV中(或者根据需要使用现有的TR),例如divID

像这样开始你的脚本

     $('#divID').toggle();

试试这个脚本:

  $(document).ready(function() {

    $("table").each(function() {
         $("tr").each(function() {
             if ($(this).hasClass('RowToClick')) {
                       }
              else {
                                $(this).toggle(50);
                    }
                });
       });

       $('.RowToClick').click(function ()
                 {
                     $(this).nextAll('tr').each( function()
                     {
                         if ($(this).is('.RowToClick'))
                        {
                           return false;
                        }
                        $(this).toggle(350);
                     });
                 });

         });

更新:

你能试试这个小提琴吗:
http://jsfiddle.net/riginvp/xgeth4br/4/

答案 1 :(得分:0)

添加以下CSS:

.RowToClick {
      display:none;
 }

或添加内联样式

<tr class="RowToClick" style="display:none">