DIV，JS如何实现“加减号”“显示隐藏”效果
点击“加”号图片->会显示隐藏的内容。（这时“加”号变成“减”号）点击“减”号图片->会隐藏显示的内容。（这时“减”号变成“加”号）“加”“减”号用的是图片，且不是鼠标划...
点击“加”号图片 -> 会显示隐藏的内容。 （这时“加”号变成“减”号）
点击“减”号图片 -> 会隐藏显示的内容。 （这时“减”号变成“加”号）
“加”“减”号用的是图片，且不是鼠标划过的效果。
就像下面的图。 展开
点击“减”号图片 -> 会隐藏显示的内容。 （这时“减”号变成“加”号）
“加”“减”号用的是图片，且不是鼠标划过的效果。
就像下面的图。 展开
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#box {
height: 130px;
width: 310px;
border: 1px solid #CECECE;
}
#box p {
width: 260px;
float: right;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
body {
font-size: 12px;
margin: 0px;
padding: 0px;
}
#box .p1 {
font-size: 16px;
}
#box .p2 {
color: #999;
display: none;
}
#box {
position: relative;
}
#box a {
display: block;
height: 18px;
width: 18px;
font-size: 18px;
text-align: center;
line-height: 18px;
font-weight: bold;
color: #063;
border: 1px solid #000;
position: absolute;
left: 20px;
top: 22px;
cursor:pointer;
}
-->
</style>
</head>
<body>
<div id="box">
<p class="p1">How do Lorem ament, consetetur adipiscing elit?</p>
<p class="p2">Lorem ipsum dolorm upsut Lorem ipsum dolorm upsut Loren ipsum dolorm upsut Lorem ipsum.</p>
<a>+</a>
</div>
</body>
</html>
<script language="javascript">
var a = document.getElementsByTagName('a')[0];
var p2 = document.getElementsByTagName('p')[1];
var temp = 0;
a.onclick = function()
{
temp++;
if (temp%2==0)
{
this.innerHTML = '+';
p2.style.display = 'none';
}
else
{
this.innerHTML = '-';
p2.style.display = 'block';
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>/*引入jquery*/
<script>
$("#jia").toggle(function() {/*绑定事件*/
$('#jia').text("-");
$('#neirong').css('display', 'none');
/*第一次点击触发隐藏*/
}, function() {
$('#jia').text("+");
$('#neirong').css('display', 'block');
/*第二次点击触发显示*/
});
</script>
<body>
<div>
<button id="jia">+</button>/*点我触发事件*/
<div id="neirong">点击按钮显示或隐藏我</div>
</div>
</body>
<html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>/*引入jquery*/
<script>
$("#jia").toggle(function() {/*绑定事件*/
$('#jia').text("-");
$('#neirong').css('display', 'none');
/*第一次点击触发隐藏*/
}, function() {
$('#jia').text("+");
$('#neirong').css('display', 'block');
/*第二次点击触发显示*/
});
</script>
<body>
<div>
<button id="jia">+</button>/*点我触发事件*/
<div id="neirong">点击按钮显示或隐藏我</div>
</div>
</body>
<html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把你dom结构贴出来
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
