向面板切换器添加滑动切换

Question

我正在尝试向一个页面添加一个滑动切换功能，你可以在这个小提琴中看到我在重现页面时遇到问题的部分：http://jsfiddle.net/nickgardner/YYcH7/10/

我可以让jquery滑动切换单独工作，但当我在页面上使用它时，它就不工作了。我不确定冲突在哪里，任何帮助都非常感谢。谢谢，尼克

http://jsfiddle.net/nickgardner/YYcH7/10/

$('#faq-1-1').click(function() {
    $('#faq-1-1-hide').slideToggle('slow', function() {
        // your code 
    });
});

更新：

我使用了下面弗洛里斯提供的建议，除了面板开关不再起作用外，这些建议都起作用了。因为这是一个Shopidy页面，所以我尝试添加已经被注释掉的代码到头部(一个include)，现在它可以工作了。

Answer 1

我实现了你的jsFiddle：http://jsfiddle.net/n6tFW/

您实际上只需要一个$(.ready)文档函数，而不是三个。

这缺少一个结尾"：$("#one, #two, #three, #four)

所以应该是：$("#one, #two, #three, #four")

注意，我注释掉了这一行：jcps.fader(300, '#switcher-panel');

我假设你的代码中有一些jsFiddle没有的库。这导致了脚本在那里中断。

在这里，您过早地关闭了$(.ready)文档函数：

$('#faq-group a').click(function(){
    $('#faq-group  a').removeClass("active");
    $(this).addClass("active");
});
}); //Closes the $(document).ready function, but you don't want to do that yet!

然后，剩下的就是在末尾添加一个额外的});：

$('#faq-1-1').click(function() {
$('#faq-1-1-hide').slideToggle('slow', function() {

});
});
});

至此，您的JS代码总数如下所示：

$(document).ready(function() {
    $("#one, #two, #three, #four").on('click', function() {
        $('[class$="-dropdown"]').not('.'+this.id.replace('nav','')+'-dropdown').slideUp();
        $('.'+this.id.replace('nav','')+'-dropdown').slideToggle(1000);
    });

    //jcps.fader(300, '#switcher-panel');

    $('#media-side-nav ul li a').click(function() {
        $('#media-side-nav ul li a').removeClass("active");
        $(this).addClass("active");
    });

    $('#faq-group a').click(function() {
        $('#faq-group a').removeClass("active");
        $(this).addClass("active");
    });

    $('#faq-1-1').click(function() {
        $('#faq-1-1-hide').slideToggle('slow', function() {

        });
    });
});

所以，是的，这个问题的实质是你需要适当地缩进你的代码。你会立刻发现像这样的错误！“ And the missing”只是一个小错误，没问题！

Answer 2

您已经多次使用id faq-group。这不是有效的HTML。将div放在一个同名的类中，然后它就可以工作了！