87,907
社区成员
发帖
与我相关
我的任务
分享点击更多按钮显示全部，再点击隐藏。初学js,求大神指导~
我想实现一个功能是一个div下面很多span标签，刚开始加载页面，显示五个span，然后点击更多，显示全部，每10个换行显示，
更多按钮变成收起，再点收起，回到刚开始的5个span
但是我的代码在点击收起时，一个也不显示了，怎么回事？求大神指导，
还有，换行应该怎么写？
我的代码：
<body>
<div id="showDiv">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span style="display: none;">6</span>
<span style="display: none;">7</span>
<span style="display: none;">8</span>
<span style="display: none;">9</span>
<span style="display: none;">10</span>
<span style="display: none;">11</span>
<span style="display: none;">12</span>
<br />
<span id="more" onclick="showMore()">更多</span>
<span id="less" style="display: none;" onclick="showLess()">收起</span>
</div>
<script type="text/javascript">
function showMore(){
var s = $("#showDiv span");
for(i=0; i<s.length;i++){
s.css("display","");
}
$("#more").hide();
$("#less").show();
}
function showLess(){
var s = $("#showDiv span");
for(i=5; i<s.length;i++){
s.css("display","none");
}
$("#less").hide();
$("#more").show();
}
</script>
</body>
更多按钮变成收起，再点收起，回到刚开始的5个span
但是我的代码在点击收起时，一个也不显示了，怎么回事？求大神指导，
还有，换行应该怎么写？
我的代码：
<body>
<div id="showDiv">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span style="display: none;">6</span>
<span style="display: none;">7</span>
<span style="display: none;">8</span>
<span style="display: none;">9</span>
<span style="display: none;">10</span>
<span style="display: none;">11</span>
<span style="display: none;">12</span>
<br />
<span id="more" onclick="showMore()">更多</span>
<span id="less" style="display: none;" onclick="showLess()">收起</span>
</div>
<script type="text/javascript">
function showMore(){
var s = $("#showDiv span");
for(i=0; i<s.length;i++){
s.css("display","");
}
$("#more").hide();
$("#less").show();
}
function showLess(){
var s = $("#showDiv span");
for(i=5; i<s.length;i++){
s.css("display","none");
}
$("#less").hide();
$("#more").show();
}
</script>
</body>
...全文
请发表友善的回复…
发表回复
疯了美了乐 2019-01-14
- 打赏
- 举报
https://blog.csdn.net/hyupeng1006/article/details/78898768
Go 旅城通票 2016-04-13
- 打赏
- 举报
http://ask.csdn.net/questions/249280
天际的海浪 2016-04-13
- 打赏
- 举报
不需要for循环
function showMore(){
$("#showDiv span").show();
$("#more").hide();
$("#less").show();
}
function showLess(){
$("#showDiv span:gt(4)").hide();
$("#less").hide();
$("#more").show();
}
yudoggy 2016-04-13
- 打赏
- 举报
试试这个
function showLess(){
//var s = $("#showDiv span");
for(i=5; i<s.length;i++){
//s.css("display","none");
$("#showDiv span:gt(4)").hide();
}
$("#less").hide();
$("#more").show();
}
乔努力 2016-04-12
- 打赏
- 举报
兄弟姐妹们，你们在哪里 - - 快来帮帮我...做不粗来好郁闷
