js控制显示元素个数超出隐藏点击显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.2/css/zui.min.css">
<script src="//cdn.bootcss.com/zui/1.9.2/lib/jquery/jquery.js"></script>
<script src="//cdn.bootcss.com/zui/1.9.2/js/zui.min.js"></script>
<div><script type="text/javascript">
var listnum = 12; // 如果大于等于3
jQuery (function ($){
$("#mingzhan div").filter("div:gt(" + (listnum - 1) + ")").hide().filter(":last").show().mouseover (function(){$(this).siblings("div:gt(" + (listnum - 1) + ")").toggle();});
});  
</script>
<div id="mingzhan" style="width:40%;margin:auto;background-color:#ccc">
<div><strong id="">名站</strong></div>
<div><a id="ctl1_9">今日头条</a></div>
<div><a id="ctl2_69" href="https://www.baidu.com" target="_blank">百度</a></div>
<div><a id="ctl3_109" href="https://www.jd.com/" target="_blank" title="">京东商城</a></div>
<div><a id="ctl4_108" href="https://club.huawei.com/" target="_blank" title="">华为论坛</a></div>
<div><a id="ctl5_107" href="http://www.cntv.cn/" target="_blank" title="">央视网</a></div>
<div><a id="ctl6_98" href="https://bbs.tianya.cn/" target="_blank" title="">天涯社区</a></div>
<div><a id="ctl7_97" href="http://www.youth.cn/" target="_blank" title="">中青网</a></div>
<div><a id="ctl8_96" href="https://www.ifeng.com/" target="_blank" title="">凤凰网</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl9_95" href="http://www.sina.com.cn/" target="_blank" title="">新浪</a></div>
<div><a id="ctl10_94" href="http://www.people.com.cn/" target="_blank" title="">人民网</a></div>
<div><a id="ctl11_93" href="http://www.sohu.com/" target="_blank" title="">搜狐</a></div>
<div><a id="ctl12_92" href="http://www.163.com/" target="_blank" title="">网易</a></div>
<div><a id="ctl13_75" href="http://cn.bing.com/" target="_blank" title="">必应</a></div>
<div><a id="ctl14_13" href="https://www.huanqiu.com/" target="_blank" >环球网</a></div>
<div style="text-align:left;color:red"><i class="icon icon-th-large "></i></div>
</div>
</body>
</html>

提示:可以修改后运行.

<< 自适应水平TAB选项卡效果JS新闻公告文字逐条向上翻滚代码 >>

查看所有评论

js控制显示元素个数 超出隐藏 点击显示

js控制显示元素个数超出隐藏点击显示