Jquery 单击选项卡时平滑地上下滑动内容

HTML

JS

问题是，对于css3，它的行为与网站不同

因此，jquery尝试实现了平滑的滑动手风琴——当单击选项卡一两次时，面板不会平滑地上下滑动。我认为JQuery工作不正常

---

帮助

您已经使用了

slideToggle

来设置动画，因此您不需要任何CSS转换以及CSS代码来更改

：target

规则中的

高度。演示中有太多CSS代码可以删除（我只是把它们注释掉了）。以下是更新后的脚本：

//hide the content intially
$('.accordion div .content').slideToggle(0);   
$('.accordion .tab').on('click', function(event) {
    var parent_tab = $(this).parent();
    if (parent_tab.hasClass('active')) return;                    
    $('.active div.content').slideToggle();
    $(this).next("div.content").slideToggle();              
    $('.accordion .active').removeClass('active');
    parent_tab.addClass('active');       
});

更新：如果您想要jQuery UI中的accordion小部件中的可折叠功能，您可以试试。
谢谢。但当我单击一个选项卡时，内容就会打开。它工作得很好，但当我再次单击同一选项卡时，内容没有关闭？感谢演示。我添加了几行来测试它是否会显示第一个内容。不知道为什么它不起作用@joe看起来你也想要这个，你应该准确地描述你想要什么，这样你就能更快地得到解决方案。谢谢，抱歉。如果我用h3替换a href标记，它对h3有效吗？我正在尝试。非常感谢你的帮助。有趣的是，我用h3替换了一个href标记，而没有使用class选项卡，并在jquery中做了一些更改——它工作得不太好。因此，没有课堂，这是行不通的。
    .accordion .tab {
  border-top: 1px solid #5b5b5b;
  display: block;
  height: 50px;
  text-decoration: none;
  color: #888;
}

.accordion .tab:hover,
.accordion div:target .tab {
  color: #000;
  border-top: 1px solid #7c7c7c;
}

.accordion div .content {
  display: none;
}

.accordion div:target .content {
  display: block;
}

.accordion > div {
  height: 50px;
  overflow: hidden;
}

.accordion > div:target {
  height: 300px;
}

 $('.accordion .tab').on('click', function(event) {
        var parent_tab = $(this).parent();
        if (parent_tab.hasClass('active'))
            $(".accordion .tab div.content:visible").slideToggle("normal");
        else {
            $(".accordion .tab div.content:visible").slideToggle("normal");
            $(this).parent().find(".content").slideToggle("normal");
        }
    });

//hide the content intially
$('.accordion div .content').slideToggle(0);   
$('.accordion .tab').on('click', function(event) {
    var parent_tab = $(this).parent();
    if (parent_tab.hasClass('active')) return;                    
    $('.active div.content').slideToggle();
    $(this).next("div.content").slideToggle();              
    $('.accordion .active').removeClass('active');
    parent_tab.addClass('active');       
});