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();
  });
});