如何以正常的slideUp行为关闭手风琴？

Question

我有手风琴。

如果我点击查看报告 - 它会像这样展开

如果我点击隐藏详细信息 - 它将恢复原始状态。

JS

$saReport.click(function() {
    console.log('R');
    $saReport.addClass('hidden'); //hide
    $saHide.removeClass('hidden'); //show
});

$saHide.click(function() {
    console.log('H');
    $saHide.addClass('hidden');
    $saReport.removeClass('hidden');
    $('.panel-collapse').removeClass('in');
});

结果

我的手风琴很快就关闭了，就像闪光的皮革一样。 如何以正常的slideUp行为关闭手风琴？

任何提示/帮助/建议都将非常感激。

Answer 1

如果您可以发布一些相关的HTML，那将会非常有用。

如果您想要一个简单的幻灯片行为，您可以使用bootstrap accordion，这是很好的记录。 如果你想自己实现它，你可以简单地使用jquery slideUp()和slideDown()方法，即：

$saReport.click(function() {
    console.log('R');
    $saReport.addClass('hidden'); //hide
    $saHide.removeClass('hidden'); //show

    // slide down your report (show)
    $('.your-report-container').slideDown(400);
});

$saHide.click(function() {
    console.log('H');
    $saHide.addClass('hidden');
    $saReport.removeClass('hidden');
    $('.panel-collapse').removeClass('in');

    // slide up your report (hide)
    $('.your-report-container').slideUp(400);
});

这些幻灯片方法允许您传递参数，该参数是动画的以ms为单位的时间。默认值为400。