修改JQuery滑动面板例程

Question

我刚开始学习JQuery，并试图学习足够多的知识以完成我的网站。

一段时间以前，sg3s编写了一个非常好的代码片段，它几乎包括了我所需要的所有功能。这是它的链接：http://jsfiddle.net/sg3s/RZpbK/

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

});

我希望对这个进行两到三个更改，但是我花了整个周末都没有成功。

1：增加第四个触发器（可能是“trigger0”），用于完全关闭面板。之前的面板将关闭，除非有人点击除trigger0以外的其他触发器，否则不会打开新的面板。

2：我想要在触发按钮上添加背景图片，以指示其已被选中。

3：我不知道是否可以实现此功能，或者这只是JQuery的副产品。如果您可以点击一次后退按钮返回到上一页，而不是按下相同数量的触发器按钮，则会很好。

如果您能够提供任何关于这些问题的帮助，将不胜感激， Bob

- Robert Scalero

---

你的第一个问题是，你在寻找一个“关闭”按钮？我添加了一个带有工作实例的答案。 - Urban Björkman

Answer 1

虽然回答晚了，但我认为这将解决你上面的问题

1. 添加一个新面板，并使其隐藏设置为'.active'的面板，参见代码中的fiddle
2. 我添加了背景颜色（可以使用相同类型的代码轻松更改为图像，我只是手头没有图像）。在Click函数中，首先使用$('a.panel').css('background', '');删除所有背景，然后在当前点击的项目上设置背景$(this).css('background', 'red');
3. 将event.preventDefault();添加到您的单击事件函数中，这将禁用href的默认行为（导航到href）。因此，保持历史记录清洁，“返回按钮将带您返回上一页。”

基于您问题中的fiddle的Fiddle

http://jsfiddle.net/7YHFa/

- Urban Björkman