jQuery显示/隐藏幻灯片切换不起作用答案

【问题标题】：jQuery show/hide slideToggle not workingjQuery显示/隐藏幻灯片切换不起作用
【发布时间】：2014-11-04 22:56:04
【问题描述】：

我尝试将此FAQ template 集成到 Magento 商店的“1 列布局”中。

显示/隐藏切换没有按预期工作，它会在持续时间（400）结束后立即隐藏。您可以通过以下方式实时查看：http://nutrija.com/faq

jQuery(document).ready(function($){

var faqTrigger = $('.cd-faq-trigger'),

    //show faq content clicking on faqTrigger
    faqTrigger.on('click', function(event){
        event.preventDefault();
        $(this).next('.cd-faq-content').slideToggle(400).end().parent('li').toggleClass('content-visible');
    });

}

我尝试更改几个参数但失败了，请帮助。

【问题讨论】：

您发布的代码中有 2 个语法错误。这是你当前的代码吗？
完整的 main.js 文件在这里：codepad.org/vDQAxte5
静态 html 在 Magento 之外运行良好。 nutrija.com/static-faq.html

标签： jquery slidetoggle

【解决方案1】：

在 slideToggle 回调中切换 content-visible 类

var faqTrigger = $('.cd-faq-trigger'),

//show faq content clicking on faqTrigger
faqTrigger.on('click', function(event){
        event.preventDefault();
        $(this).next('.cd-faq-content').slideToggle(400, function(){
               //Add toggle class here
               faqTrigger.parent('li').toggleClass('content-visible');
         });
    });

}

【讨论】：

【解决方案2】：

我已经解决了这个问题，问题在于将 jQuery 与 Magento 集成

解决方案：

使用 jQuery 时，您必须确保它使用的是“noConflict”模式。为此，请添加：

var $j=jQuery.noConflict();

到你的 jQuery 脚本的末尾。

现在，如下更改任何 jQuery 代码。如果你有：

//show faq content clicking on faqTrigger
faqTrigger.on('click', function(event){
    event.preventDefault();
    $(this).next('.cd-faq-content').slideToggle(400).end().parent('li').toggleClass('content-visible');
});

}

改成：

//show faq content clicking on faqTrigger
faqTrigger.on('click', function(event){
    event.preventDefault();
    $f(this).next('.cd-faq-content').slideToggle(400).end().parent('li').toggleClass('content-visible');
});

}

【讨论】：