html - 在页面加载时隐藏可折叠行

Question

我想折叠此表加载中的可折叠行；目前，它们加载展开并且切换隐藏它们。

这是 CSS:

.header {
    text-align: center;
    font-size: 24pt;
    width: 90%;
}
table { 
    width: 80%; 
    border-collapse: collapse; 
    margin:50px auto;
    background-color: white;
    align: center;
    margin-top:-15px;
    }

th { 
    background: #605757; 
    color: white; 
    font-weight: bold; 
    }

td, th { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left; 
    font-size: 18px;
    }

.labels tr td {
    font-weight: bold;
    color: #fff;
}

.label tr td label {
    display: block;
}t-weight: bold;
        color: #fff;
    }

    .label tr td label {
        display: block;
    }


    [data-toggle="toggle"] {
        display: none;
    }

这是 HTML:

<table>
    <thead>
        <tr>
            <th>Region</th>
            <th>XML</th>
            <th>URL for Converter</th>
            <th>API Refresh</th>
            <th>Live</th>
        </tr>
    </thead>
<tbody class="hide">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </tbody>    
        <tbody class="labels">
            <tr>
                <td colspan="5">
                    <label for="washingtonarea">Washington;</label>
                    <input type="checkbox" name="washingtonarea" id="washingtonarea" data-toggle="toggle">
                </td>
            </tr>
        </tbody>

这是 jQuery:

$(document).ready(function() {
    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
});

我已经尝试了一堆 jquery 片段，但没有一个起作用。

Answer 1

.toggle() 引用 jQuery 文档

http://api.jquery.com/toggle/

"The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown."

因此，您可以通过在 CSS 中隐藏内容来轻松更改此设置，因此它最初不会显示。将此添加到您的 CSS:

.hide {
  display: none;
}