從左向右滑動切換滑塊，點擊一個顯示/隱藏按鈕

我有一個4列，10行的表，默認情況下隱藏第4列。第1行有一個顯示/隱藏圖像按鈕。從左向右滑動切換滑塊，點擊一個顯示/隱藏按鈕

我需要的是，當我點擊顯示/隱藏圖像按鈕是什麼：

第4列看上去好像滑動從左至右
覆蓋模式DIV出現（如燈箱，shadowbox等），當我關閉模式窗口，然後再次點擊顯示/隱藏圖像按鈕時，第四列應該向左滑出，這將會有一個關閉按鈕
。

我寫的代碼正在爲我工作，但它不會從第3列向右滑動，並且會再次單擊滑動。另外，當我單擊顯示/隱藏按鈕時，模式疊加層不起作用。這需要一些幫助來解決。

這是我的代碼：

.subtn{ 
display:inline-block; 
background:url("images/next_right.png") right 0px no-repeat; 
width:16px; 
height:16px; 
} 
.subtn.expanded{ 
background:url("images/previous_left.png") right 0px no-repeat; 
width:16px; 
height:16px; 
} 




$(document).ready(function(){ 
    var $content = $("td:nth-child(4)").hide(); 
    $(".subtn").on("click", function(e){ 
    $(this).toggleClass("expanded"); 
    $content.slideToggle(); 
    }); 
}); 



<table> 
<tr> 
     <td colspan="4" align="right"><a href="#" rel="lightbox" class="subtn"></a></td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>sam</td> 
     <td>europe</td> 
     <td style="display:none;">new</td> 
    </tr> 
    <tr> 
     <td>7</td> 
     <td>john</td> 
     <td>europe</td> 
     <td style="display:none;">new</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>bob</td> 
     <td>africa</td> 
     <td style="display:none;">new</td> 
    </tr> 

</table>

JS FIDDLE LINK

來源

2013-04-26 guyan

請在Jsfiddle上模擬相同:) – dreamweiver 2013-04-26 12:27:33

你在問題中提到的東西看起來不像是小提琴裏的東西。再看一遍 – Alpay 2013-04-26 12:44:42

我已更新小提琴鏈接。請立即檢查。在表格的第一行中，當我單擊時（圖片未上傳但可點擊），第四行顯示，但模態窗口未出現，第四個窗口未滑動到右側。請幫助。 – guyan 2013-04-29 08:06:51

沒有任何關於你的模式在你提供的代碼。所以我跳過這部分。至於你的第四列切換，麻煩有兩點：

動畫效果與塊元素很好。 TD默認情況下不是阻止的。所以我在你的css規則中改爲display: block;
slideToggle只能滑落。對於從左到右的幻燈片，您應該使用toggle以及適當的選項;

在jsFiddle中，您提供了沒有應該運行切換過程的按鈕。我添加了它。安東尼在這裏工作： http://jsfiddle.net/pEKvq/7/

來源

2013-04-30 16:04:59 zeliboba

非常感謝您的時間。這真的很有幫助。 – guyan 2013-05-03 09:13:16

@guyan隨時接受我的回答並投票給我，讓他人幫忙;） – zeliboba 2013-05-04 16:08:17

從左向右滑動切換滑塊，點擊一個顯示/隱藏按鈕

回答

相關問題