javascript - 右から左へ折りたたみ可能なパネル

Question

jQuery の折りたたみ可能なパネルを右から左に使用していますが、クリックして閉じてアクティブなリンクを強調表示すると、正しく機能しません...

リンクを見つけてください：

http://jsfiddle.net/egUHv/

コードは次のとおりです。

$(function() {
    $('#nav').stop().animate({'marginRight':'-100px'},1000);

function toggleDivs() {
    var $inner = $("#nav");
    if ($inner.position().right == "-100px") {
        $inner.animate({right: 0});
        $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
    }
    else {
        $inner.animate({right: "100px"}); 
        $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
    }
}
$(".nav-btn").bind("click", function(){
    toggleDivs();
});

});

Answer 1

これを参照してください：http://jsfiddle.net/egUHv/5/

$(function() {
$('#nav').stop().animate({'margin-right':'-100px'},1000);

function toggleDivs() {
var $inner = $("#nav");
if ($inner.css("margin-right") == "-100px") {
    $inner.animate({'margin-right': '0'});
    $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
}
else {
    $inner.animate({'margin-right': "-100px"}); 
    $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
}
}
$(".nav-btn").bind("click", function(){
    toggleDivs();
});

});

Answer 2

jQuery の .position()はプロパティを持つオブジェクトを返さないrightため、現在のコードは常にelse条件に入ります (以降$inner.position().right === undefined !== '-100px')。

.position()leftとtopプロパティを持つオブジェクトを返します。

#nav要素の位置を確認する代わりに、要素のクラス トグルを使用して、ナビゲーションが閉じているか開いているかを判断するソリューションを次に示します。

$(function() {
  $('#nav')
    .stop()
    .animate({'marginRight':'-100px'},1000, function() { $(this).addClass('closed'); });

  function toggleDivs() {
    var $inner = $("#nav");
    var $img = $(".nav-btn img", $inner);

    if ($inner.hasClass('closed')) {
      $inner.animate({ right: "100px" }); 
      $img.attr('alt', 'close');
    } else {
      $inner.animate({ right: 0 });
      $img.attr('alt', 'open');
    }

    $inner.toggleClass('closed');
  }

  $(".nav-btn").bind("click", function() {
    toggleDivs();
  });
});