Question

我正在寻找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>

Answer 1

我想以下代码段可行。单击右箭头按钮时，溢出将显示没有滚动;单击左箭头按钮时，列表元素内的内容将返回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>

我希望它有所帮助！

Answer 2

修订答案

在此修订版中，代码在许多方面都比较简单。首先，它简化了HTML，因此有一个切换按钮可以向下和向下滑动列表元素。此外，代码修饰CSS以强调幻灯片效果。顺便提一下，代码使用定制的子弹。

我已经简化了JavaScript，因此它只是更改了无序列表的类名，以在其完整显示和部分显示之间切换。注意：CSS不会改变溢出属性;它仍然是隐藏的。相反，它会更改列表的height属性，这样当只显示一个元素时，列表样式＆＃34; close＆＃34;反映出20px的高度，但当列表向下滑动时，它的样式现在是＃34;打开＆＃34;并且高度为120px。

＆＃13;

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";
       }
};

＆＃13;

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;
}

＆＃13;

<!DOCTYPE html>
<head>
</head>
<body>
  <button title="Click to Toggle List">&hearts;</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>

＆＃13;

隐藏和显示CSS溢出的滑块按钮

2 个答案:

修订答案