頁面加載時隱藏可摺疊行

我想讓此表中的可摺疊行加載收起;目前，他們加載擴展和切換隱藏它們。頁面加載時隱藏可摺疊行

這裏是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片段，都沒有工作。

來源

2017-01-30 RJfiddle

*「而是發佈所有的CSS的，jQuery和HTML在這裏，它是在該鏈接中列出，並很容易找到」 *號，請提供您的代碼，並創建一個最小，完整的，可驗證的例子。 http://stackoverflow.com/help/mcve你的文章的目標是幫助社區，而不僅僅是解決你的問題。這篇文章在你的和第三方網站上的代碼會超過你的代碼，所以當有人從現在開始搜索並發現這篇文章時，他們需要在這裏引用代碼 - 而不是在第三方網站上。 –

「*啓用Adblocker後，您無法再訪問WebDesignerHut.com。*」請修改您的問題以包含代碼本身。 –

鏈接在工作jsfiddle鏈接:)請張貼jsfiddle鏈接;） – 1Mayur

參考jQuery文檔爲.toggle()

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

「的匹配的元素將被揭示或立即隱藏，沒有動畫，通過改變CSS顯示屬性。如果最初顯示元件，它將被隱藏;如果隱藏，它將被顯示。「

因此，您可以通過隱藏CSS中的內容來輕鬆更改此內容，因此它不會在最初顯示。添加到您的CSS：

.hide { 
    display: none; 
}

來源

2017-01-30 20:14:24 shakeypress

完美，非常感謝你！ – RJfiddle

很酷:) @RJfiddle你能接受我的回答嗎？ – shakeypress

頁面加載時隱藏可摺疊行

回答

相關問題