手风琴与 jQuery答案

【问题标题】：Accordion with jQuery手风琴与 jQuery
【发布时间】：2013-04-09 23:32:04
【问题描述】：

我正在尝试使用 jQuery 实现手风琴，但是我遇到了问题。当我按下按钮时，它应该是slideToggle 信息，但它只是滑入滑出。

我不知道为什么会这样，我正在学习，如果有人可以帮助我，我将不胜感激。

这是我的 JavaScript：

$(".wrap-faq  a").on("click",accordion);

function accordion() {
    if($(this).attr("class") != "active"){
        $(".wrap-faq  li  p").slideDown();
        $(this).next().slideToggle();
        $(".wrap-faq a").removeClass("active");
        $(this).addClass("active");
       }
}

我还留下了指向我的 JSFiddle 演示的链接：http://jsfiddle.net/zZaTf/

【问题讨论】：

你为什么不用内置的 JQuery UI Accordion？
我发现 slideToggle 非常不稳定。也许尝试使用 slideUp 和 slideDown？
您好 Jhonnatan，您解决了这个问题吗？如果是这样，你能发布你的答案吗？非常感谢:)
是的！我终于找到了方法...我明天上班时将其发布给您，因为我实际上没有她的代码，我将在jsFiddle中上传它

标签： jquery html css function jquery-ui-accordion

【解决方案1】：

您在 .txt-ans-faq 类上有 display: none，slide... 效果不适用于隐藏元素。好吧，它会，但你不会看到它。

【讨论】：

【解决方案2】：

正如 Ilia 所说，display: none 会阻止您看到您的内容文本，所以首先摆脱它。您可以通过调用初始 slideUp() 来隐藏所有内容。

实际的slideToggle可以简单的这样实现：

$(document).ready(function() {

  $('.txt-ans-faq').slideUp(0);

  $('.wrap-faq  a').click(function(e) {
        $(this).next().find('.txt-ans-faq').slideToggle(300);
  });
});

Fiddle

【讨论】：

【解决方案3】：

我更新了 Simon 手风琴脚本。

    $(document).ready(function() {

   $('.txt-ans-faq').slideUp(0);

  $('.wrap-faq  a').click(function(e) {
         $('.txt-ans-faq').slideUp(300);      
        $(this).next().find('.txt-ans-faq').slideToggle(300);
  });
});

http://jsfiddle.net/zZaTf/9/

【讨论】：