jquery点击小图标切换,点击之后切换成向上箭头,再次点击切换成向下箭头
我图片已经做好,写JQUERY的时候不知哪错了,没效果大神帮看看,谢谢http://pan.baidu.com/s/1dD8exmL...
我图片已经做好,写JQUERY的时候不知哪错了,没效果
大神帮看看,谢谢
http://pan.baidu.com/s/1dD8exmL 展开
大神帮看看,谢谢
http://pan.baidu.com/s/1dD8exmL 展开
1个回答
推荐于2016-05-06
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>这试</title>
<style>
body {
margin: 0;
padding: 0;
font: 12px/1.5 \5b8b\4f53, Arial, sans-serif;
}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p
{
padding: 0;
margin: 0;
}
ol,ul {
list-style: none;
}
a {
color: #252525;
text-decoration: none;
}
a:hover {
color: #ba2636;
text-decoration: underline;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
*zoom: 1;
}
.sub_headUl {
float: left;
padding: 13px 0
}
.sub_headUl li {
float: left
}
.sub_headUl li a {
display: block;
color: #666;
font-size: 13px;
font-weight: bold;
line-height: 14px;
border-right: 1px solid #bbb;
margin-right: 8px;
padding-right: 8px
}
.sub_headUl li a:hover {
text-decoration: underline
}
.f_fBox {
width: 1000px;
margin: 20px auto 0;
overflow: hidden
}
.firend_ul {
width: 1010px;
margin-top: 10px
}
.firend_ul li {
float: left;
white-space: nowrap;
word-break: keep-all
}
.firend_ul li a {
color: #666;
display: block;
margin-right: 10px;
line-height: 24px
}
.firend_ul li a:hover {
text-decoration: underline
}
#aaa {
position: absolute;
bottom: 6px;
right: 12px;
width: 17px;
height: 18px;
z-index: 999;
cursor: pointer;
}
.arrow2 {
background-image: url(arrow2.png);
}
.arrow3 {
background-image: url(arrow3.png);
}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
{
$ ("#aaa").click (function ()
{
$ (this).toggleClass ("arrow3");
$ ("#toggle_box").slideToggle (300);
});
});
</script>
</head>
<body>
<div id="aaa" class="arrow2"></div>
</body>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询