使用带有表列的 jquery 手风琴

Question

我能否以某种方式使 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 手风琴聪明。

Answer 1

HTML

<table width="50%" 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，它只会隐藏元素。但是如果你使用切换来代替，它可以用来在单个按钮中显示和隐藏