打开选项卡并向下滑动到区域答案

【问题标题】：Open tab and slide down to area打开选项卡并向下滑动到区域
【发布时间】：2014-09-20 17:11:04
【问题描述】：

我正在使用 jqueryResponsiveTabs，当按比例缩小时会变成手风琴。

在下面的链接中有一个选项卡区域，在 mboile 上变成了手风琴。顶部的个性化按钮应打开“您需要了解的内容”部分中的“个性化”选项卡，并将页面向下滚动到该区域。

我可以让它打开标签，但我不能让它向下滚动。

有什么想法吗？

http://www.swimmingcover.co.uk/bag/test.html

【问题讨论】：

你能简单解释一下吗

标签： jquery tabs anchor accordion slidedown

【解决方案1】：

我并不完全了解你需要某种手风琴代码。在这里，我有简单的 jquery 手风琴。如果你遇到任何困难，请告诉我。

<div class='container'>
<div class='item'>Item 1</div>
<div class='item-data'>
    <div>
        This is the content for Accordion 1
    </div>
</div>
<div class='item'>Item 2</div>
<div class='item-data'>
    <div>
        This is the content for Accordion 2
    </div>
</div>
<div class='item'>Item 3</div>
<div class='item-data'>
    <div>
        This is the content for Accordion 3
    </div>
</div>
<div class='item'>Item 4</div>
<div class='item-data'>
    <div>
        This is the content for Accordion 4
    </div>
</div>

.container {
    display: block;
    width: 500px;
    height: auto;
    margin: 0 auto;
}
.item {
    display: block;
    width: inherit;
    height: 40px;
    line-height: 40px;
    background: #555;
    border: 1px solid #000;
    cursor: pointer;
    color: #fff;
}
.item-data {
    display: none;
    width: inherit;
    height: auto;
    border: 1px solid #ccc;
}
.active {
    background: #eee;
    color: #000;
}
.item-data div {
    margin: 30px;
}

$(document).ready(function (e) {
    $('.item').click(function (e) {
        if ($(this).next('.item-data').css('display') != 'block') {
            $('.active').slideUp('fast').removeClass('active');
            $(this).next('.item-data').addClass('active').slideDown('slow');
        } else {
            $('.active').slideUp('fast').removeClass('active');
        }
    });
});

我还提供了工作小提琴的链接，请查看此链接以供参考。 DEMO

【讨论】：