我希望在单击按钮时从浏览器的左边缘滑动面板,并在单击相同的按钮(切换)时隐藏面板.
HTML
<div class="panel"> </div> <a href="javascript:void(0);" class="slider-arrow show">»</a>
CSS
.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;
}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial,Helvetica,sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}
jQuery的
$(function(){
$('.slider-arrow.show').click(function(){
$( ".slider-arrow,.panel" ).animate({
left: "+=300"
},700,function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
});
$('.slider-arrow.hide').click(function(){
$( ".slider-arrow,.panel" ).animate({
left: "-=300"
},function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
});
});
它显示面板但不隐藏面板.使用选择器有任何问题吗？
http://jsfiddle.net/Paramasivan/eHded/1/
解决方法
正如其他人在jQuery中所述,一旦文档被初始化,它只会查找最初存在的元素.因此,每次都会运行.show函数.
而不是在.slider-arrow.show上查找单击事件,您可以查看.slider-arrow,然后在单击此类示例后检查类.
$(function(){
$('.slider-arrow').click(function(){
if($(this).hasClass('show')){
$( ".slider-arrow,function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
else {
$( ".slider-arrow,function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
}
});
});
http://jsfiddle.net/eHded/4/