在页面加载时隐藏可折叠行答案

【问题标题】：Hiding collapsible rows on page load在页面加载时隐藏可折叠行
【发布时间】：2017-06-16 02:20:29
【问题描述】：

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

这是 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 sn-ps，都没有成功。

【问题讨论】：

“不要在此处发布所有 CSS、jQuery 和 HTML，而是在该链接中列出并且很容易找到。” 不，请包含您的代码并创建一个最小的、完整的、可验证的例子。 stackoverflow.com/help/mcve您的帖子的目标是帮助社区，而不仅仅是解决您的问题。该帖子的寿命将超过您和第 3 方网站上的代码，因此当有人在 2 年后搜索并找到此帖子时，他们需要此处的代码以供参考，而不是在第 3 方网站上。
"启用 Adblocker 后，您将无法再访问 WebDesignerHut.com。" 请编辑您的问题以包含代码本身。
链接与工作 jsfiddle 链接一样 :) 请发布 jsfiddle 链接 ;)
@Mayur 如果可能（而且经常是），代码应该限制在帖子中，作为可验证的示例（通过代码片段），就像 Michael Coker 所说的那样。跨度>
对不起，第一次发帖，新手。现在在这里添加代码。

标签： jquery html css html-table collapse

【解决方案1】：

请参阅.toggle() 的 jQuery 文档

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

"通过改变CSS display 属性，匹配的元素将立即显示或隐藏，没有动画。如果元素最初显示，则隐藏；如果隐藏，则显示。"

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

.hide {
  display: none;
}

【讨论】：