展開/折疊帶有手風琴行的表格的所有按鈕

Question

我創建了一個帶有手風琴行的表格。 我在頂部還有一個按鈕，用於展開所有手風琴並再次折疊它們。

手風琴可以完美地單獨打開和關閉，以及在使用全部展開/折疊按鈕時，它們都可以完美地展開和折疊。 一旦我使用了全部展開/折疊按鈕，問題就出現了，我無法打開單個手風琴。

只有刷新頁面后，我才能單獨打開它們，直到我使用全部展開/折疊按鈕。

任何幫助，將不勝感激。

盡可能排查調試，請教多人，均未成功。

HTML：

<table class="fold-table">
    <tbody>
        <tr class="view">
            <td>Organisational Hierarchy Maintenance</td>
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
        <tr class="fold">
            <td colspan="7">
                <div class="fold-content">
                    <p>Define your strategic units and business units in a multi-level hierarchy</p>
                </div>
            </td>
        </tr>
        <tr class="view">
            <td>Organisational Hierarchy Maintenance</td>
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
        <tr class="fold">
            <td colspan="7">
                <div class="fold-content">
                    <p>Define your processes and business </p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

jQuery：

$(function() {
    $(".fold-table tr.view").on("click", function() {
        $(this).toggleClass("open").next(".fold").toggleClass("open");
    });
});

function expandCollapse() {
    if ($(".fold").css('display') == 'none') {
        $("#expand-collapse").html("Collapse All");
        $(".fold").show("slow");
    } else {
        $("#expand-collapse").html("Expand All");
        $(".fold").hide("slow");
    }
}

前端預覽

Answer 1

您可以看到帶箭頭的現場演示http://jsfiddle.net/dreambold/q0tfp4yd/7/

這是工作代碼。

 $(function () { $(".fold-table tr.view").on("click", function () { $(this).toggleClass("open").next(".fold").toggleClass("open"); }); }); $("#expand-collapse").on("click", function () { if ($(this).html() == "Expand All") { $(".fold-table tr.view, .fold").addClass("open"); $(this).html("Collapse All"); } else { $(".fold-table tr.view, .fold").removeClass("open"); $(this).html("Expand All"); } });

 .licensing-options-page-content h1 { font-weight: bolder; text-transform: uppercase; margin: 0% 0% 3% 0%; }.licensing-options-page-content { margin-top: 12%; } @media (min-width: 1920px) and (max-width: 2560px) {.licensing-options-page-content { margin-top: 8%; } } /* Main Tabs */.main-tabs-lo { background-color: #f2f2f7; color: black; display: inline-block; cursor: pointer; padding: 10px; font-size: 15px; font-weight: 700; width: 26%; margin-bottom: 10px; } @media (min-width: 1920px) and (max-width: 2560px) {.main-tabs-lo { font-size: 21px; width: 20%; } }.top-tabs-lo { margin-bottom: 30px; }.top-tabs-lo.main-tabs-lo { color: #030700; text-align: center; background-color: #f2f2f7; text-transform: uppercase; margin-right: -4px; border-right: 1px solid darkgray; }.tab-radio { display: none; } /* Tabs behaviour, hidden if not checked/clicked */.tab-content { display: none; }.tab-radio:checked +.tab-content, .tab-radio:checked +.sub-tab-content { display: block; }.top-tabs-lo.loactive, .label:hover { background-color: black; color: white; } /* Tabs Content */.tab-content-lo { padding: 0px; }.tab-content-lo, .tab-content-container-lo h4 { color: white; } /*.tab-content-container-lo { /*width: calc(60% - (.5em + 6px)); min-height: 400px; }*/.licensing-options-content { justify-content: center; align-content: center; margin-top: 5%; } /* Table + Accordion */.mol:after { content: " g/mol"; }.cur:before { content: "$"; }.per:after { content: "%"; } * { box-sizing: border-box; } table { width: 100%; background: #f2f2f7; }.tab-content-container-lo table { margin: 0; }.tab-content-container-lo.tab-content { padding: 0; }.tab-content-container-lo td { border: none; }.tab-content-container-lo table th { text-align: left; border: none; background-color: #000; color: white; } table th, table td { padding: 0.4em; } /*.licensing-options-page-content table td { background-color: #F2F2F7; }*/ table.fold-table > tbody > tr.view td, table.fold-table > tbody > tr.view th { cursor: pointer; } table.fold-table > tbody > tr.view td:first-child, table.fold-table > tbody > tr.view th:first-child { position: relative; padding-left: 20px; font-family: "Montserrat", sans-serif; } table.fold-table > tbody > tr.view td:first-child:before, table.fold-table > tbody > tr.view th:first-child:before { position: absolute; top: 50%; left: 5px; width: 9px; height: 16px; margin-top: -8px; font: 16px fontawesome; color: #999; content: "\f0d7"; transition: all 0.3s ease; } table.fold-table > tbody > tr.view.open td:first-child:before, table.fold-table > tbody > tr.view.open th:first-child:before { position: absolute; top: 50%; left: 5px; width: 9px; height: 16px; margin-top: -8px; font: 16px fontawesome; color: #999; content: "\f0da"; transition: all 0.3s ease; }.fold-table h3 { color: white; margin: 0; } table.fold-table > tbody > tr.view:nth-child(4n-1) { background: #e2e2e2; } table.fold-table > tbody > tr.view. td:first-child:before, table.fold-table > tbody > tr.view.open th:first-child:before { transform: rotate(-180deg); color: #333; } table.fold-table > tbody > tr.fold { display: none; } table.fold-table > tbody > tr.fold.open { display: table-row; }.fold-content { padding: 0.5em; }.fold-content h3 { margin-top: 0; }.fold-content > table { border: 2px solid #ccc; }.fold-content > table > tbody tr:nth-child(even) { background: green;important. }:view img { margin-left; 36%. }:lic-btn { cursor; pointer: background-color; #000: color; white: padding; 10px: width; 12%: text-align; center: margin-bottom; 12px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <table class="fold-table"> <tbody> <tr class="view"> <td>Organisational Hierarchy Maintenance</td> <td>Test 1</td> <td>Test 2</td> </tr> <tr class="fold"> <td colspan="7"> <div class="fold-content"> <p>Define your strategic units and business units in a multi-level hierarchy</p> </div> </td> </tr> <tr class="view"> <td>Organisational Hierarchy Maintenance</td> <td>Test 1</td> <td>Test 2</td> </tr> <tr class="fold"> <td colspan="7"> <div class="fold-content"> <p>Define your processes and business </p> </div> </td> </tr> </tbody> </table> <button id="expand-collapse">Expand All</button>