我正在尝试构建一个网站,但是当我将addClass和removeClass与切换结合使用时,我的跨度会在第一次单击时被删除。因此我无法再次点击我的跨度。
这是我的HTML,脚本和CSS:
HTML
<div id="footersi">
<span class="footspans">First span</span>
<span class="footspans">Second span</span>
<span class="footspans">Third span</span>
<span class="footspans">Fourth span</span>
<span class="footspans">Fifth span</span>
</div>
<div id="footerci">
<span class="footspans" id="contactinf">Contactinfo</span>
<ul class="index">
<li><b>Li1</b></li>
</ul>
</div>
脚本(jQuery)
$(document).ready(function(){
$(".index").hide();
$("#contactinf").click(function(){
$(this).toggle(
function(){
$(this).addClass('active');
},
function(){
$(this).removeClass('active');
}
);
$(".index").slideToggle();
$("html, body").animate({ scrollTop: 1000 }, 600);
});
});
CSS
.footspans {
cursor:pointer;
color:#9D9D9D;
transition:color 0.2s ease 0s;
-webkit-transition:color 0.2s ease 0s;
font-size:1.1em;
text-decoration:none;
font-weight:bold;
margin-right:20px;
}
.footspans:hover {
color:black;
}
#footersi {
float:left;
width:740px;
}
#footerci {
float:right;
width:240px;
}
#contactinf {
float:right;
margin-right:5px;
}
.index {
float:left;
}
.active {
float:left;
color:black;
}
答案 0 :(得分:1)
toggle()
正在切换元素的可见性,因此在第一次单击时它将隐藏元素,并且您将无法再次单击它。我相信你真正想要的是toggleClass()
$("#contactinf").click(function() {
$(this).toggleClass("active");
});