Question

我正在尝试向页面添加一个slidetoggle函数，你可以看到我在这个小提琴中复制时遇到问题的页面部分：http://jsfiddle.net/nickgardner/YYcH7/10/

我能够让jquery slidetoggle单独工作，但是当我在页面上使用它时它不起作用。我不确定冲突在哪里，我们非常感谢任何帮助。谢谢，尼克

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

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

更新：

我使用了Floris在下面提供的建议，除了该面板切换器不再有效之外，它的工作原理。由于这应该是在Shopidy页面中，我尝试将已经注释掉的代码添加到头部（包含），现在它正在运行。

Answer 1

我将你的jsFiddle分叉并使其正常工作：http://jsfiddle.net/n6tFW/

你真的只需要一个$（document）.ready函数，而不是三个。

这是一个关闭“： $("#one, #two, #three, #four)

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

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

我认为你的代码中有一些jsFiddle没有的库。它导致脚本在那里打破。

在这里，您过早关闭$（document）.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() {

        });
    });
});

所以是的，这个问题的真正原料是你需要正确缩进你的代码。你会立刻发现这些错误！而失踪的“只是一个小错误，没问题！”

Answer 2

您多次使用ID faq-group。这是无效的HTML 。将div放在该名称的类中然后它应该工作！

将slidetoggle添加到面板切换器

2 个答案: