jQuery示例 - 水平手风琴 - 表而不是无序列表 - 更新

Question

好的，我让它适合任何需要这个的人：）

[原始陈述/问题]
以下是我正在尝试做的事情的例子（但点击不要悬停）：The Example

JavaScript的：

<script type="text/javascript">
    $(document).ready(function(){
        // Get original font size
        var originalFontSize = $('html').css('font-size');

        // Get active column
        var activeColumn = $(".activeColumn");

        // Set max width using percentage %
        var maxWidth = 50;

        // Get width % ratio for min width by getting the children (count) in the header
        var table_header_children = $('tr:first-child').children().size();

        // Divide the column header count by 100 to get the average width
        var table_column_width_average = (100 / table_header_children);

        // Get the outer height of the header
        var table_header_height = $('th').outerHeight();

        // Set min width for the columns
        var minWidth = table_column_width_average;

        // Animate table by clicking the table header ( <th> )
        $("tr th").click(function(){
            if ($(this).hasClass('correct_text_spacing')) {
                // Check for double click, do nothing
                var doubleClicked = true;
            }
            else {
                // Animates the last active column
                $(activeColumn).animate({
                    width: minWidth + "%"
                }, {
                    queue: false,
                    duration: 600
                });

                // Animates the table header
                $(this).animate({
                    width: maxWidth + "%"
                }, {
                    queue: false,
                    duration: 600
                });

                activeColumn = this;

                // Reset the table header CSS
                $('tr:first-child').children().css({
                    'width': minWidth,
                    'overflow': 'hidden',
                    'white-space': 'nowrap',
                    'height': table_header_height
                });

                // Remove class if found
                $('table.tbl tr').children().removeClass('correct_text_spacing');

                // Reset the font size to zero
                var index = $(this).parent().children().index(this);
                $('table.tbl tr').each(function(){
                    $(':nth-child(' + (index + 1) + ')', this).css('font-size', '0px');
                });

                // Fix text spacing on selected column
                var index = $(this).parent().children().index(this);
                $('table.tbl tr').each(function(){
                    $(':nth-child(' + (index + 1) + ')', this).addClass('correct_text_spacing').animate({
                        fontSize: originalFontSize
                    }, {
                        queue: true,
                        duration: 950
                    });
                });
            }
        });
    });
</script>

CSS：

<style type="text/css">
    .tbl {
        table-layout: fixed;
        border-top: 5px solid #ccc;
        border-collapse: collapse;
        background: #fff;
        width: 100%;
    } .tbl td {
        border: 1px solid #ccc;
        padding: 2px 5px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
    } .tbl th {
        border-bottom: 1px solid #ccc;
        padding: 2px 5px;
        overflow: hidden;
        white-space: nowrap;
        background: #fff;
        display: table-cell !important;
    }

    td.correct_text_spacing {
        white-space: normal;
    }
</style>

表格布局（大幅溢出）：

<table class="tbl">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th>
            Cell 2:Long Heading Data
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
        <th>
            Cell 6:Heading
        </th>
        <th>
            Cell 7:Heading
        </th>
        <th>
            Cell 8:Heading
        </th>
        <th>
            Cell 9:Heading
        </th>
        <th>
            Cell 10:Heading
        </th>
        <th>
            Cell 11:Heading
        </th>
        <th>
            Cell 12:Heading
        </th>
        <th>
            Cell 13:Heading
        </th>
        <th>
            Cell 14:Heading
        </th>
        <th>
            Cell 15:Heading
        </th>
        <th>
            Cell 16:Heading
        </th>
        <th>
            Cell 17:Heading
        </th>
        <th>
            Cell 18:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td>
            Cell 2:Row 1:Overflowing Data - This has a lot of extra data that will be hidden and displayed correctly. 
            Please add more data to test the functionality of the cell data
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1: "Lorem ipsum dolor sit amet, 
            consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
            Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum."
        </td>
        <td>
            Cell 6:Row 1
        </td>
        <td>
            Cell 7:Row 1
        </td>
        <td>
            Cell 8:Row 1
        </td>
        <td>
            Cell 9:Row 1
        </td>
        <td>
            Cell 10:Row 1
        </td>
        <td>
            Cell 11:Row 1
        </td>
        <td>
            Cell 12:Row 1
        </td>
        <td>
            Cell 13:Row 1
        </td>
        <td>
            Cell 14:Row 1
        </td>
        <td>
            Cell 15:Row 1
        </td>
        <td>
            Cell 16:Row 1
        </td>
        <td>
            Cell 17:Row 1
        </td>
        <td>
            Cell 18:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td>
            Cell 2:Row 2:Overflowing Data
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
        <td>
            Cell 6:Row 2
        </td>
        <td>
            Cell 7:Row 2
        </td>
        <td>
            Cell 8:Row 2
        </td>
        <td>
            Cell 9:Row 2
        </td>
        <td>
            Cell 10:Row 2
        </td>
        <td>
            Cell 11:Row 2
        </td>
        <td>
            Cell 12:Row 2
        </td>
        <td>
            Cell 13:Row 2
        </td>
        <td>
            Cell 14:Row 2
        </td>
        <td>
            Cell 15:Row 2
        </td>
        <td>
            Cell 16:Row 2
        </td>
        <td>
            Cell 17:Row 2
        </td>
        <td>
            Cell 18:Row 2: "Lorem ipsum dolor sit amet, 
            consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
            Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum."
        </td>
    </tr>
</table>

[原始陈述/问题]
经过对代码/问题的多次编辑/修改后，我有点工作，但仅在IE（6＆amp; 7）中，它在Firefox（Augh !!）中无法正常工作。我认为这是同时调用动画调用而不是同时调用，尝试了回调选项，但无法使其工作。任何帮助都会很棒:) 另一个问题，但我可能会接受它：当动画发生时，白色空间：来自CSS的法线也正常工作，导致动画使屏幕真正很长（高度），然后随着列单元格变大而自行校正。无论如何在动画之后调用CSS，甚至可以制作动画？ 顺便说一句：here is a WORKING DEMO 我在这里想要实现的是在一个页面上显示一个没有水平滚动条或滚动的表格，并允许该表格显示所选数据并隐藏其他列以供以后显示（如果单击）。 极端示例：如果我有一个包含30列的表，我希望它能够显示而无需用户以任何水平方式滚动或移动页面，而是单击列数据以显示所选列。

感谢您解决此问题的所有帮助和想法：）

Answer 1

好的，我完全重新编辑了这个，因为我更深入地研究了你的问题，发现白色空间是一个问题。

就像我之前说过的那样，使用 white-space：pre-wrap 不是为了避免失真。还有IE等价物。

首先，这是一个示例，演示重新调整td元素的大小并删除其他元素的样式。它是硬编码的，但可以根据您的需要进行操作。

http://ece.arizona.edu/~justinvh/test.html

这是html：

<!DOCTYPE HTML>
<html>
  <head>    
    <title>Testing Horizontal Accordion</title>
    <style>
      table {
        width: 100%;
      }

      th {
        display: table-cell !important;
      }

      td {
        border: 1px solid #A8A8A8;
      }

      div.content {
        max-height: 20px;
        overflow: hidden;
        white-space: pre-wrap;
      }
    </style>
    <script src="jquery-1.3.2.min.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th style="width: 70%;">A</th>
          <th>B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>                      
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>Hello, my baby!</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

这是JavaScript：

<script>
  var $active = $("thead > tr > th:first");
  var $active_td = $('div.content', 'table > tbody > tr > td:nth-child(1)');
  var min_width = $active.next().width();
  var max_width = $active.width();

  $("thead > tr > th").each(function(i, e) {
    (function(ith, element) {
      $(element).click(function() {
        $active_td.css('max-height', '20px');
        $active.animate({ width: min_width }, { queue: false, duration: 400 });
        $active_td = $('div.content', 'table > tbody > tr > td:nth-child(' + (ith + 1) + ')');
        $active_td.css('max-height', 'inherit');                        
        $(this).animate({ width: max_width }, { queue: false, duration: 400 });
        $active = $(this);
      });
    })(i, e);
  });

  $('thead > tr > th:first').click();
</script>

所以，有些事情需要注意。我使用第n个子选择器通过循环遍历每个th并使用消耗环境的函数（以避免引用）来获取与th对应的td元素。显然，这可以通过多种方式完成。

您可以在动画上使用“完整”回调来应用此CSS并按此方式执行。

我故意完全限定选择器，以便您可以看到它们应该如何工作。您可以根据需要添加标识符/类。

请告诉我这是否适合您。

Answer 2

这可能是一个愚蠢的想法 - 但如果你坚持使用html（即你无法编辑它），但你确实能够在页面上应用任何javascript - 为什么不简单地阅读数据该表包含内存（即将其转换为某些js数据结构），然后使用javascript删除原始表，然后使用它创建任何适合您需要的html。

这可能比桌面黑客更简单。