toggle（）在新闻热点上的运用
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>新闻热点</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("div")
.css("background-color", "gainsboro")
.css("border", "dotted thin red")
.css("width", "410px");
$("ul>li")
.css("font-family", "宋体")
.css("font-size", "11pt")
.css("color", "darkblue");
$("ul>li:gt(4)").hide(); //默认隐藏大于4的li标签内容
$("a#more") //选择id为more的a标签
.toggle(
function() { //第一次点击时较快显示隐藏内容
$(this).text("Hide...");
$(":hidden").show("fast");
},
function() { //第一次点击时较慢隐藏内容
$(this).text("More...");
$("ul>li:gt(4)").hide("slow");
}
);
});
</script>
<style type="text/css">
ul {
padding: 0px 0px 0px 5px;
margin: 5px 0px 5px 20px;
}
li {
list-style: disc;
padding: 3px;
margin: 2px;
text-align: left;
}
</style>
</head>
<body>
<p>toggle（）切换元素可见状态例子：</p>
<div>
<ul>
<li>中央军委举行2018年开训动员大会 ***发布训令</li>//内容摘录自新闻页
<li>***向全军发布训令 锻造精兵劲旅迈向世界一流军队</li>
<li>领航新征程 新时代新气象新作为 理上网来</li>
<li>2018年五险一金将迎5个大变化 对你的收入有影响</li>
<li>***任陕西代省长 就职前还去了梁家河</li>
<li>加拿大应学台当局如何“防范大陆”？台艺人:找死</li>
<li>香港又一“占中”执勤警察获刑 政界促严惩发起人</li>
<li>中企将在印度邻国投十亿建高楼 印媒又紧张起来了</li>
</ul>
<p align="right" style="margin: 2px 10px;">
<a id="more">More...</a>
</p>
</div>
</body>
