jquery - 手风琴与 jQuery

Question

我正在尝试用 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/

Answer 1

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

Answer 2

As Ilia notes, display: none will prevent you from seeing your content text, so get rid of that for a start. You can hide all the content by calling an initial slideUp().

The actual slideToggle can be implemented simply in this way:

$(document).ready(function() {

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

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

Fiddle

Answer 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/