jQuery的手風琴延長錶行

我有報價的基本表是這樣的：jQuery的手風琴延長錶行

<table class="x"> 
<tbody> 
    <tr class="y"> 
    <th>Id</th> 
    <th>Title</th> 
    <th>Is valid</th> 
    <th>Added date</th> 
    <th>Expiration date</th> 
    </tr> 

    <tr> 
     <td>1</td> 
     <td>Title1</td> 
     <td>Yes</td>   
     <td>11.09.2017</td> 
     <td>30.09.2017</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>Title2</td> 
     <td>Yes</td>   
     <td>1.10.2017</td> 
     <td>2.11.2017</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>Title3</td> 
     <td>Yes3</td>   
     <td>11.11.2017</td> 
     <td>30.12.2017</td> 
    </tr> 
    (...) 
</tbody> 
</table>

我需要添加jQuery的手風琴，這將在每個提議的onclick延長每個錶行，並提供額外信息的單一DIV中，在點擊行的下方。任何人都知道如何做到這一點？我讀過不久手風琴API，但沒有成功，那麼遠，

來源

2017-10-14 gileneusz

請顯示您的嘗試。 Stackoverflow不是免費的編碼服務或*「如何」*教程服務。目標是幫助修復**你的代碼** – charlietfl

@charlietfl好吧 - 你是對的，我目前正在尋找解決方案。我應該問問自己會編寫任何代碼。 – gileneusz

我有固定的代碼在本文下面的小提琴。我剛剛將div更換爲tr。

SQLFiddle Demo

來源

2017-10-14 14:51:45

哇，這與我想象的非常接近。感謝您的代碼！只有當行可以更順利地垂直展開... – gileneusz

歡迎您... –

-2

$(function() { 
 
    $("#accordion").accordion(); 
 
    });

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Accordion - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
</head> 
 
<body> 
 
    
 
<div id="accordion"> 
 
    <h3>Section 1</h3> 
 
    <div> 
 
    <p> 
 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
 
    </p> 
 
    </div> 
 
    <h3>Section 2</h3> 
 
    <div> 
 
    <p> 
 
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
 
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
 
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
 
    suscipit faucibus urna. 
 
    </p> 
 
    </div> 
 
    <h3>Section 3</h3> 
 
    <div> 
 
    <p> 
 
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
 
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
 
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
 
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
 
    </p> 
 
    <ul> 
 
     <li>List item one</li> 
 
     <li>List item two</li> 
 
     <li>List item three</li> 
 
    </ul> 
 
    </div> 
 
    <h3>Section 4</h3> 
 
    <div> 
 
    <p> 
 
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
 
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
 
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
 
    mauris vel est. 
 
    </p> 
 
    <p> 
 
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
 
    inceptos himenaeos. 
 
    </p> 
 
    </div> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

來源

2017-10-14 12:58:15

這與問題有什麼關係？這只不過是jQuery UI演示的副本/粘貼而已，沒有任何解釋 – charlietfl

雖然此代碼片段可能會解決問題，[包括解釋]（http://meta.stackexchange.com/questions/114762/explaining-完全基於代碼的答案）確實有助於提高帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。 –

jQuery的手風琴延長錶行

回答

相關問題