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/

“匹配的元素将立即显示或隐藏，没有动画，通过更改CSS显示属性。如果元素最初显示，它将被隐藏;如果隐藏，它将被显示。”

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

.hide {
  display: none;
}

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

1 个答案: