隱藏和顯示CSS溢出的滑塊按鈕
[英]Slider Buttons that Hide and Reveal CSS Overflow
問題描述
我正在尋找Javascript代碼，該代碼使用戶可以交替單擊按鈕以完全顯示無序列表，然后單擊另一個以隱藏列表的第一個元素之外的所有元素。 默認情況下，由於無序列表的樣式，溢出的內容將被隱藏。 我希望獲得與-webkit-paged-x類似的結果，除了沒有出現垂直或水平滾動條。
ul{ overflow:hidden; height:20px; width: 20px; } li{ float:left; width:30px; }
<!DOCTYPE html> <head> </head> <body> <input type="button" value="<"><input type="button" value=">"> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> </ul> </body> </html>
2 個解決方案
解決方案1
0 2017-08-18 10:50:30
我猜下面的代碼片段會起作用。 當單擊向右箭頭按鈕時，溢出將不滾動顯示。 當單擊左箭頭按鈕時，列表元素內的內容將返回到overflow:hidden 。
$(document).ready(function(){ $('input').attr('type','button').click(function(){ $('ul').css( 'overflow', 'hidden'); }); $('input').attr('type','button').next().click(function(){ $('ul').css( 'overflow', 'visible'); }); });
ul{ overflow:hidden; height:20px; width: 20px; } li{ float:left; width:30px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <head> </head> <body> <input type="button" value="<"><input type="button" value=">"> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> </ul> </body> </html>
希望對您有所幫助！
解決方案2
0 2017-08-18 10:55:34
修改后的答案
在此修訂版中，代碼在許多方面都更加簡單。 首先，它簡化了HTML，因此有一個切換按鈕可以上下滑動列表元素。 此外，該代碼還對CSS進行修飾，以強調滑動效果。 順便說一句，該代碼使用自定義的項目符號。
我簡化了JavaScript，以便僅更改無序列表的類名即可在其完整顯示和部分顯示之間切換。 注意：CSS不會改變溢出屬性； 它仍然隱藏。 而是，它更改了列表的height屬性，以便當僅顯示一個元素時，列表樣式“關閉”反映的高度為20px，但是當列表向下滑動時，其樣式為“打開”，高度為120px 。
var d = document; var ul_tag = d.getElementsByTagName("ul")[0]; var btn = d.getElementsByTagName("button")[0]; btn.onclick = function() { if ( ul_tag.className == "close") { ul_tag.className = "open"; } else if (ul_tag.className == "open") { ul_tag.className = "close"; } };
ul { background:#ffdede; border: 3px dotted #cff; box-shadow:3px 3px 6px #777; list-style: none; overflow:hidden; } ul.close{ height:20px; width: 20px; } ul.open{ height:120px; width: 20px; } li{ float:left; width:30px; color:#306; font: 1em Helvetica; } button { background:#000; color:cyan; margin-left:23px; border:none; } ul li:before { margin-left:-20px; color: #f0f; content: '» '; font-weight: bold; }
<!DOCTYPE html> <head> </head> <body> <button title="Click to Toggle List">♥</button> <ul class="close"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> </ul> </body> </html>
帶有CSS滑塊的導航按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.