Question

我正在使用从右到左的jQuery可折叠面板，但是当点击关闭并突出显示活动链接时，它无法正常工作...

请找到链接：

，代码是：

$(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's .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();
  });
});

可折叠面板从右到左

2 个答案: