jQuery实现动态切换

最新推荐文章于 2021-06-03 04:18:33 发布

weixin_33716941

最新推荐文章于 2021-06-03 04:18:33 发布

阅读量306

点赞数

文章标签： javascript python php ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1625056

版权

2019独角兽企业重金招聘Python工程师标准>>>

<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<script src="http://xiguape.wiipu.com/basecode/js/jquery.1.9.1.min.js"></script>
<style>
*,body{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
ul{
width: 500px;
margin: 0 auto;
}
ul li{list-style-type: none; }
ul li h2{
border-bottom: 1px solid #999;
padding: 10px 0;
cursor: pointer;
}
ul h2 span{padding-right:10px;}
ul li p{
padding: 10px 0;
font-size: 14px;
line-height: 23px;
display: none;
}
</style>
<script>
$(document).ready(function(){
var falg=true;

$("h2").eq(0).click(function(){
if(falg){
$("h2").eq(0).children("span").text("-");
$("h2").eq(0).siblings().slideDown();
falg=false;
}else{
$("h2").eq(0).children("span").text("+");
$("h2").eq(0).siblings().slideUp();
falg=true;

}
});
$("h2").eq(1).click(function(){
if(falg){
$("h2").eq(1).children("span").text("-");
$("h2").eq(1).siblings().slideDown();
falg=false;
}else{
$("h2").eq(1).children("span").text("+");
$("h2").eq(1).siblings().slideUp();
falg=true;

}
});
$("h2").eq(2).click(function(){
if(falg){
$("h2").eq(2).children("span").text("-");
$("h2").eq(2).siblings().slideDown();
falg=false;
}else{
$("h2").eq(2).children("span").text("+");
$("h2").eq(2).siblings().slideUp();
falg=true;

}
});
$("h2").eq(3).click(function(){
if(falg){
$("h2").eq(3).children("span").text("-");
$("h2").eq(3).siblings().slideDown();
falg=false;
}else{
$("h2").eq(3).children("span").text("+");
$("h2").eq(3).siblings().slideUp();
falg=true;

}
});
})

</script>
</head>
<body>
<ul>
<li>
<h2><span>+</span>邮件申请</h2>
<p>申请邮件请发送到jiangting@zhimawork.com，目前开放申请的角色：PHP工程师、WEB前端工程师、设计师;
邮件标题“申请成为芝麻开发工作者—姓名”；</p>
</li>
<li>
<h2><span>+</span>技能考核（科目一）</h2>
<p>通过简历筛选的，将安排参加某个角色的最基础技能考核。科目一考核为现场或线上作业，约30-60分钟，每人有3次免费考核的机会。</p>
</li>
<li>
<h2><span>+</span>技能考核（科目二）</h2>
<p>通过科目一考核的，将安排参加。科目二考核为线下作业，约1天，每人有3次免费考核的机会。</p>
</li>
<li>
<h2><span>+</span>获得认证</h2>
<p>通过科目二考核即获得平台工作者认证，平台工作人员会对平台的使用进行培训，然后等候平台项目调度人员安排参与项目。</p>
</li>
</ul>
<p style="width:500px;margin:30px auto 0;line-height:23px;"><b>使用jQuery完成效果制作。</b><br />点击“H2”标题时，子元素span 改变文本内容为 “-”，兄弟元素“p”标签向下滑动。<br />再次点击“H2”标题时，子元素span 文本内容变回 “+”，兄弟元素“p”标签向上滑动。</p>
</body>
</html>