jQuery示例 – 水平手风琴 – 表而不是无序列表 – 更新
好吧，我让它适合任何需要这个的人:)
[原始声明/问题]
这是我正在尝试做的事情的例子（但点击不hover）： 示例
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 ( ) $("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 }); }); } }); });
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; }
表格布局（大溢出）：
Cell 1:Heading Cell 2:Long Heading Data Cell 3:Heading Cell 4:Heading Cell 5:Heading Cell 6:Heading Cell 7:Heading Cell 8:Heading Cell 9:Heading Cell 10:Heading Cell 11:Heading Cell 12:Heading Cell 13:Heading Cell 14:Heading Cell 15:Heading Cell 16:Heading Cell 17:Heading Cell 18:Heading Cell 1:Row 1 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 Cell 3:Row 1 Cell 4:Row 1 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." Cell 6:Row 1 Cell 7:Row 1 Cell 8:Row 1 Cell 9:Row 1 Cell 10:Row 1 Cell 11:Row 1 Cell 12:Row 1 Cell 13:Row 1 Cell 14:Row 1 Cell 15:Row 1 Cell 16:Row 1 Cell 17:Row 1 Cell 18:Row 1 Cell 1:Row 2 Cell 2:Row 2:Overflowing Data Cell 3:Row 2 Cell 4:Row 2 Cell 5:Row 2 Cell 6:Row 2 Cell 7:Row 2 Cell 8:Row 2 Cell 9:Row 2 Cell 10:Row 2 Cell 11:Row 2 Cell 12:Row 2 Cell 13:Row 2 Cell 14:Row 2 Cell 15:Row 2 Cell 16:Row 2 Cell 17:Row 2 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."
[原始声明/问题]
经过对代码/问题的许多编辑/修改后，我有点工作，但仅在IE（6和7）中，它在Firefox（Augh !!）中无法正常工作。 我认为这是动画调用同时被调用而不是同时调用，尝试了回调选项，但无法使其工作。 任何帮助都会很棒:)另一个问题，但我可能会忍受它：当动画发生时，白色空间：CSS的正常也在工作，导致动画使屏幕真的很长（高度），然后自己纠正为列单元格变大。 无论如何在动画后调用CSS，甚至可以制作动画片？ BTW： 这是一个工作演示我在这里想要实现的是在一个页面上显示一个没有水平滚动条或滚动的表格，并允许该表格显示所选数据并隐藏其他列以供以后显示（如果单击）。 极端示例：如果我有一个包含30列的表，我希望它能够显示而无需用户以任何水平方式滚动或移动页面，而是单击列数据以显示所选的列。
感谢您解决此问题的所有帮助和想法:)
好吧，我完全重新编辑了这个，因为我更深入地研究了你的问题并发现白色空间是一个问题。
就像我之前说的那样，使用白色空间：预先包裹不要预先避免失真。 还有IE等价物。
首先，这是一个示例，演示重新调整td元素的大小并删除其他元素的样式。 它是硬编码的，但可以根据您的需要进行操作。
http://ece.arizona.edu/~justinvh/test.html
这是html：
Testing Horizontal Accordion A B 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! 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! 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! Hello, my baby!
这是JavaScript：
所以，有些事情需要注意。 我使用第n个子选择器通过循环遍历每个th并使用消耗环境的函数（以避免引用）来获取对应于th的td的元素。 显然，这可以通过多种方式完成。
您可以在动画上使用“完整”回调来应用此CSS并以此方式执行。
我故意完全限定选择器，这样你就可以看到它们应该如何工作。 您可以根据需要添加标识符/类。
如果这对您有用，请告诉我。
这可能是一个愚蠢的想法 – 但如果你坚持使用html（即你无法编辑它），但你确实能够在页面上应用任何javascript – 为什么不简单地读取表中的数据包含到内存（即将其转换为某些js数据结构），然后使用javascript删除原始表，然后使用它创建任何适合您需要的html。
这可能比桌面黑客更简单。