jQuery show hide左からスライドパネル

Question

ボタンをクリックしたときにブラウザの左端からパネルをスライドさせ、同じボタンをクリックしてパネルを非表示にする（トグル）。

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('«').removeClass('show').addClass('hide'); 
}); 

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

それはパネルを示すが、パネルを隠していません。セレクタに問題がありますか？

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

Answer 1

その唯一の最初に存在していた要素を探しています。そのため、あなたの.show機能が毎回実行されていました。

.slider-arrow.showでクリックイベントを検索する代わりに、.slider-arrowをクリックして、この例のようにクリックされたクラスを確認できます。 （おそらく、ドキュメントの準備ができたときに）そのコードが第1のRANある時点でclickイベントをバインド

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

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

Answer 2

あなたはDOMがロードされた後に「ショー」と「隠す」を操作するためのjQueryを使用しているので、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/

Answer 3

あなたは.slideToggle()を使用してみてくださいa .click(function(){/*in here*/})。

Answer 4

私はあなたがこのようなアクティブなアンカークラスから選択するアクションを管理することができると思う：

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

ですから、唯一のアニメーション機能を持っています。ここで

が更新フィドルです：ドキュメントが初期化されると、他の人がjQueryを使って述べてきたよう http://jsfiddle.net/eHded/5/

Answer 5

あなたが$('.slider-arrow.hide').click(func.....を書き、。後で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'); 
}