0

我正在尝试向页面添加一个滑动切换功能，您可以在此小提琴中看到我遇到问题的页面部分：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 
    });
});

更新 ：

我使用了弗洛里斯在下面提供的建议，除了面板切换器不再工作之外，这些建议很有效。由于这是在 Shopidy 页面中，因此我尝试将已注释掉的代码添加到头部（包含）中，它现在可以工作了。

4

2 回答 2

0

我分叉了你的 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() {

        });
    });
});

所以，是的，这个问题的真正关键在于你需要正确缩进你的代码。你会立即发现这样的错误！而缺少的“只是一个小错误，没问题！

于 2013-08-26T20:05:30.190 回答
0

您已经多次使用该 ID faq-group。这不是有效的 HTML。将 div 放在该名称的类中，然后它应该可以工作！

于 2013-08-27T05:11:21.990 回答