使用带有表列的 jquery 手风琴

Posted 2023-05-08

【中文标题】使用带有表列的 jquery 手风琴

【英文标题】：Use jquery accordion with table columns

【发布时间】：2013-04-25 07:40:51

【问题描述】：

我能否以某种方式使 jQuery UI Accordion 与 html 表格兼容？我已尽一切努力使列可折叠。

知道我已经这样做了

$(".col1, .col2").addClass("hidden");

$(".show-hide-col1").css("cursor", "pointer").click(function() 
    $(".col2").addClass("hidden");
    $(".col1").removeClass("hidden");
);

$(".show-hide-col2").css("cursor", "pointer").click(function() 
    $(".col1").addClass("hidden");
    $(".col2").removeClass("hidden");
);

但它不如 jquery 手风琴聪明。

【问题讨论】：

向您显示html,css 代码，以了解您所尝试的更多信息。

【参考方案1】：

HTML

<table  border="1px solid red">
    <tr><td class="col1">Col1</td><td class="col2">Col2</td></tr>
</table>
<button class="show-hide-col1">Hide col1</button>
<button class="show-hide-col2">Hide col2</button>

脚本

$(document).ready(function()
    $(".show-hide-col1").click(function() 
        $('.col1').toggle();
    );
    
    $(".show-hide-col2").click(function() 
        $('.col2').toggle();
    );
);

小提琴 http://jsfiddle.net/3qbe4coj/3/

注意：如果你使用hide，它只会隐藏元素。但是如果你使用切换来代替，它可以用来在单个按钮中显示和隐藏

【讨论】：

嗨，Rohan，我一直在尝试使用<table> 来做这件事，但我似乎无法弄清楚如何对应该可折叠的列进行分组。我一直在查看 API，但找不到任何选项来告诉脚本哪些列应该是可折叠的，只有哪些元素应该是标题

@Nets 测试上面的，我做了修改。