jQuery show hide從左側滑動面板

我想要一個面板從瀏覽器的左邊緣滑動，當點擊一個按鈕，並在點擊同一個按鈕（切換）時隱藏面板。jQuery show hide從左側滑動面板

的Html

<div class="panel"> 
    </div> 

    <a href="javascript:void(0);" class="slider-arrow show">&raquo;</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('&laquo;').removeClass('show').addClass('hide'); 
}); 

$('.slider-arrow.hide').click(function(){ 
    $(".slider-arrow, .panel").animate({ 
     left: "-=300" 
     }, 700, function() { 
     // Animation complete. 
     }); 
     $(this).html('&raquo;').removeClass('hide').addClass('show'); 
}); 
});

它示出了面板，但並不隱藏面板。任何使用選擇器的問題？

http://jsfiddle.net/Paramasivan/eHded/1/

來源

2013-10-15 Paramasivan

正如其他人使用jQuery說，一旦該文件被初始化其只想找最初存在的元素。出於這個原因，你的每個時間都在運行你的函數.show。

而不是尋找.slider-arrow.show上的點擊事件，你可以看看.slider-arrow，然後檢查它被點擊後的類，就像在這個例子中一樣。

$(function(){ 
    $('.slider-arrow').click(function(){ 
    if($(this).hasClass('show')){ 
    $(".slider-arrow, .panel").animate({ 
     left: "+=300" 
     }, 700, function() { 
     // Animation complete. 
     }); 
     $(this).html('&laquo;').removeClass('show').addClass('hide'); 
    } 
    else {  
    $(".slider-arrow, .panel").animate({ 
     left: "-=300" 
     }, 700, function() { 
     // Animation complete. 
     }); 
     $(this).html('&raquo;').removeClass('hide').addClass('show');  
    } 
    }); 
});

http://jsfiddle.net/eHded/4/

來源

2013-10-15 23:03:27 Trevor

謝謝，好的其他{ – Paramasivan

由於您使用jQuery來操縱「秀」和「隱藏」後的DOM加載，jQuery的不知道這些元素存在。

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call...

我建議使用jQuery的on()以事件委託和選擇動態生成的類，像這樣：

$(document).on('click','.slider-arrow.show',function(){ 
    .... 
}); 

$(document).on('click','.slider-arrow.hide',function(){ 
    .... 
});

http://jsfiddle.net/eHded/2/

來源

2013-10-15 22:56:11 showdev

非常感謝你。有用。 – Paramasivan

你應該嘗試使用.slideToggle()，裏面放一個.click(function(){/*in here*/})。

來源

2013-10-15 22:56:38 PHPglue

我認爲你可以管理從活動錨類選擇這樣的動作：

$(function(){ 
    $('.slider-arrow').click(function(){ 
    var anchor = this; 
    var removeClass = "show"; 
    var addClass = "hide"; 
    var diff = "+=300"; 
    var arrows = "&laquo;"; 
    if($(anchor).hasClass("hide")){ 
    diff = "-=300"; 
    removeClass = "hide"; 
    addClass="show"; 
    arrows = '&raquo;'; 
    } 
    $(".slider-arrow, .panel").animate({ 
    left: diff 
    }, 700, function() { 
    // Animation complete. 
     $(anchor).html(arrows).removeClass(removeClass).addClass(addClass); 
    });  
    }); 
});

所以，你有隻有一個動畫功能。

這裏是更新的小提琴：http://jsfiddle.net/eHded/5/

來源

2013-10-15 22:59:24 hyunkeln

+1看起來不錯！ http://jsfiddle.net/eHded/3/ – showdev

箭頭沒有變化 – Paramasivan

對不起，我已經更新了它，現在箭頭變了。 – hyunkeln

當你寫$('.slider-arrow.hide').click(func.....，在當時那個代碼綁定click事件是第一RAN（可能當文檔準備好）。如果稍後更改DOM（即添加.hide類），則需要重新綁定click事件。

您需要改用jQuery的.on()方法（http://api.jquery.com/on/）。

$(document).on('click', '.slider-arrow.show', function() { /*.......*/ }); 

$(document).on('click', '.slider-arrow.hide', function() { /*.......*/ });

一個更好的選擇卻完全是使用CSS3過渡和jQuery的.toggleClass()

.panel { 
    left: -300px; 
    transition: left 1s; 
    /* other styles... */ 
} 

.panel.expand { 
    left: 0; 
} 

$('.slider-arrow').click(function() { 
    $('.panel').toggleClass('expand'); 
}

來源

2013-10-15 23:04:47

jQuery show hide從左側滑動面板

回答

相關問題