0

どうにかして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 アコーディオンほどスマートではありません。

4

1 に答える 1

0

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 を使用すると、要素のみが非表示になります。ただし、代わりにトグルを使用すると、単一のボタンで表示と非表示を切り替えることができます

于 2013-05-01T09:57:01.147 に答える