表格行作爲下拉列表

我有一個HTML表格。我試圖添加功能，當我點擊一行時，它應該顯示一組行，就像下拉菜單一樣。我也做了以下表格行作爲下拉列表

<table> 
    <tr class="clicker"> 
        <td>some data</td> 
    </tr> 
    <tr class="hidden"> 
        <td>Some new data here</td> 
    </tr> 
</table>

$(".clicker").on("click", function() { 
    if ($(this).next().hasClass("down")) { 
     $(this).next().slideUp("normal").removeClass("down"); 
    } else { 
     $(this).next().slideDown("normal").addClass("down"); 
    } 
});

當我試圖在隱藏的行添加第二排和第三排，如：

<table> 
<tr class="clicker"> 
    <td>some data</td> 
</tr> 
<tr class="hidden"> 
    <td>Some new data here</td> 

</tr> 
<tr class="hidden"> 
    <td>Some more data here</td> 

</tr>

，它不起作用。我做錯了什麼？

來源

2013-05-19 Jishnu U Nair

你到底要什麼？ '當我試圖在隱藏行中添加第二行和第三行時，像：'你是否想在隱藏行中創建新單元格？ – juanpastas

或者你是否想要創建新的隱藏行？ – juanpastas

@juanpastas什麼OP意味着幻燈片只適用於一行'隱藏'作爲類，而不是所有行... 吉什努你可以嘗試我的解決方案，並接受，如果它解決了你的問題。 –

看到這個example。

$('.clicker').click(function(){ 
    $(this).nextUntil('.clicker').slideToggle('normal'); 
});

它切換了幾行。你也可以很容易地用這種方式有幾個答題器。

來源

2013-05-19 16:17:49 juanpastas

你將如何使所有「行」的初始狀態關閉？ –

回答我自己的問題：因爲我使用的是除「隱藏」以外的類，所以在我提出的FAQ頁面中，我有'問題'和'回答'類。我只是簡單地設置'.answer {display：none;}'來默認初始化摺疊的行，然後@juanpastas JS將從那裏接管... –

你需要siblings代替next .. next selects only 1 next sibling

DEMO

$(".clicker").on("click", function(){ 

if($(this).siblings().hasClass("down")){ 
    $(this).siblings().slideDown("normal").removeClass("down"); 
} 
else{ 
    $(this).siblings().slideUp("normal").addClass("down"); 

} 
});

或者

$(".clicker").on("click", function(){ 

    $(this).siblings().slideToggle('normal'); 

});

來源

2013-05-19 16:19:49

表格行作爲下拉列表

回答

相關問題