修改JQuery滑动面板例程

我是Qjuery的新手，正在努力学习，以完成我的网站

不久前，sg3s编写了一个非常出色的小提琴，它完成了我所寻找的大部分功能。这是：

}))；​

我想对此做两三个改变，周末的大部分时间我都在试图解决这个问题，但都没有成功

1：第四个触发器（可能是“trigger0”）将完全关闭面板。以前的面板将关闭，并且没有新的面板将打开，除非有人按下除trigger0之外的其他触发器之一

2：我想在触发器按钮上添加一个背景图像，以表明它已被选中

3：我不知道这是不是可以做到，或者这只是JQuery的副产品。如果你能按一次后退按钮回到上一页，而不是按触发按钮的次数，那就太好了

如果您在这些项目上有任何帮助，我们将不胜感激，

---

鲍勃

迟来的回答，但我认为这将解决上述问题

添加一个新面板，并使其隐藏带有“.active”类集的面板，有关代码，请参阅fiddle

我添加了一个背景色（使用相同类型的代码很容易更改为图像，只是手头没有图像）。在单击函数中，首先使用

$（'a.panel'）.css（'background'，''）删除所有背景

然后在当前单击的项目

$（this.css（'background'，'red'）上设置背景

添加

event.preventDefault（）

要单击事件函数，这将禁用href的默认行为（导航到href）。这样就可以保持历史记录的整洁，“后退”按钮将把你们带回到上一页

根据你的问题中的一个来编小提琴

您的第一点，您正在寻找的是一个“关闭”按钮？我用一把工作小提琴添加了一个答案。

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