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

我正在寻找Javascript代码，它允许用户交替地单击一个按钮以完全显示无序列表，并单击另一个按钮以隐藏列表中除第一个元素以外的所有元素。默认情况下，由于无序列表的样式设置，溢出的内容被隐藏。我希望获得类似于

-webkit-paged-x

的结果，只是没有出现垂直或水平滚动条

ul{
溢出：隐藏；
高度：20px；
宽度：20px；
}
李{
浮动：左；
宽度：30px；
}

a
b
c
d
e
f

我想下面的代码片段会有用的。单击右箭头按钮时，溢出将显示，没有滚动；单击左箭头按钮时，列表元素内的内容将返回到

overflow:hidden

$（文档）.ready（函数（）{
$（'input'）.attr（'type'，'button'）。单击（函数（）{
$（'ul'）.css（'overflow'，'hidden'）；
});
$（'input'）.attr（'type'，'button'）。下一步（）。单击（函数（）{
$（'ul'）.css（'overflow'，'visible'）；
});
});
ul{
溢出：隐藏；
高度：20px；
宽度：20px；
}
李{
浮动：左；
宽度：30px；
}


a
b
c
d
e
f

我想下面的代码片段会有用的。单击右箭头按钮时，溢出将显示，没有滚动；单击左箭头按钮时，列表元素内的内容将返回到
overflow:hidden


$（文档）.ready（函数（）{
$（'input'）.attr（'type'，'button'）。单击（函数（）{
$（'ul'）.css（'overflow'，'hidden'）；
});
$（'input'）.attr（'type'，'button'）。下一步（）。单击（函数（）{
$（'ul'）.css（'overflow'，'visible'）；
});
});
ul{
溢出：隐藏；
高度：20px；
宽度：20px；
}
李{
浮动：左；
宽度：30px；
}


a
b
c
d
e
f

修改后的答案
在这个修订版本中，代码在许多方面更简单。首先，它简化了HTML，因此有一个切换按钮可以上下滑动列表元素。此外，代码对CSS进行了修饰，以强调幻灯片效果。顺便说一句，代码使用了一个定制的项目符号

我简化了JavaScript，使其只需更改无序列表的类名，即可在完整和部分显示之间切换。注意：CSS不会改变溢出属性；它仍然隐藏着。相反，它会更改列表的“高度”属性，以便当仅显示一个元素时，列表样式“关闭”反映的高度为20px，但当列表向下滑动时，其样式现在为“打开”，高度为120px


var d=文档；
var ul_tag=d.getElementsByTagName（“ul”）[0]；
var btn=d.getElementsByTagName（“按钮”）[0]；
btn.onclick=函数（）{
如果（ul_tag.className==“关闭”）{
ul_tag.className=“打开”；
}
其他的
如果（ul_tag.className==“打开”）{
ul_tag.className=“关闭”；
}
};
ul{
背景：#ffdede；
边框：3个点#cff；
盒影：3px 3px 6px#777；
列表样式：无；
溢出：隐藏；
}
保险商实验室关闭{
高度：20px；
宽度：20px；
}
开放式{
高度：120px；
宽度：20px；
}
李{
浮动：左；
宽度：30px；
颜色：#306；
字体：1em Helvetica；
}
钮扣{
背景：#000；
颜色：青色；
左边距：23px；
边界：无；
}
李：以前{
左边距：-20px；
颜色：#f0f；
内容：“»”；
字体大小：粗体；
}

&心；

a
b
c
d
e
f

修改后的答案
在这个修订版本中，代码在许多方面更简单。首先，它简化了HTML，因此有一个切换按钮可以上下滑动列表元素。此外，代码对CSS进行了修饰，以强调幻灯片效果。顺便说一句，代码使用了一个定制的项目符号

我简化了JavaScript，使其只需更改无序列表的类名，即可在完整和部分显示之间切换。注意：CSS不会改变溢出属性；它仍然隐藏着。相反，它会更改列表的“高度”属性，以便当仅显示一个元素时，列表样式“关闭”反映的高度为20px，但当列表向下滑动时，其样式现在为“打开”，高度为120px


var d=文档；
var ul_tag=d.getElementsByTagName（“ul”）[0]；
var btn=d.getElementsByTagName（“按钮”）[0]；
btn.onclick=函数（）{
如果（ul_tag.className==“关闭”）{
ul_tag.className=“打开”；
}
其他的
如果（ul_tag.className==“打开”）{
ul_tag.className=“关闭”；
}
};
ul{
背景：#ffdede；
边框：3个点#cff；
盒影：3px 3px 6px#777；
列表样式：无；
溢出：隐藏；
}
保险商实验室关闭{
高度：20px；
宽度：20px；
}
开放式{
高度：120px；
宽度：20px；
}
李{
浮动：左；
宽度：30px；
颜色：#306；
字体：1em Helvetica；
}
钮扣{
背景：#000；
颜色：青色；
左边距：23px；
边界：无；
}
李：以前{
左边距：-20px；
颜色：#f0f；
内容：“»”；
字体大小：粗体；
}

&心；

a
b
c
d
e
f

我将投票结束这个问题，因为在这个网站上，你需要自己编写代码。如果您遇到问题，可以发布您尝试过的内容，清楚地解释哪些内容不起作用，并提供SO不是代码编写服务。我认为结束这个问题将是一种耻辱。有时一个人只是需要一点帮助来学习如何学习。我和另一个人发现了麦汁