折叠标签 - 跳到打开标签

Question

我有手风琴标签，这个手风琴设置为最大1打开标签，所以如果我打开一个标签，然后我打开其他标签，第一个标签自动折叠，并eveyrthing工程很好，但如果我有问题：当第一个标签有很长的内容和用户打开其他标签，然后第一个标签隐藏，并且页面滚动远远低于打开的标签，我想添加一些跳转到打开的标签。

我在开发网站：http://styro.fm4.pl/

$(document).ready(function() { 
 
    $("label").click(function() { 
 
    $('html, body').delay(1000).animate({ 
 
     scrollTop: $(this).offset().top 
 
    }, 500); 
 
    }); 
 
});

.tab { 
 
    position: relative; 
 
    margin-bottom: 6px; 
 
    width: 100%; 
 
    color: #fff; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
} 
 

 
input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0 0 0 4em; 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    line-height: 2.5; 
 
    cursor: pointer; 
 
    color: #000; 
 
} 
 

 
.tab-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: max-height .35s; 
 
    -o-transition: max-height .35s; 
 
    transition: max-height .35s; 
 
    padding: 0px 20px 00px 20px; 
 
} 
 

 
input:checked~.tab-content { 
 
    max-height: 9000px; 
 
} 
 

 
label::after { 
 
    position: absolute; 
 
    left: 23px; 
 
    top: 3px; 
 
    display: block; 
 
    width: 31px; 
 
    height: 45px; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
input[type=radio]+label::after { 
 
    content: url(../images/up.png); 
 
} 
 

 
input[type=radio]:checked+label::after { 
 
    transform: rotateX(180deg); 
 
} 
 

 
input[type=radio]:checked+label { 
 
    color: #e79f39; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="tab"> 
 
    <input id="tab-1" type="radio" name="tabs2"> 
 
    <label for="tab-1">Tab 1</label> 
 
    <div class="tab-content"> 
 
    Content<div style="height:2000px;">spaace</div>space 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-2" type="radio" name="tabs2"> 
 
    <label for="tab-2">Tab 2</label> 
 
    <div class="tab-content"> 
 
    Content 
 
    </div> 
 
</div> 
 
<div style="height:2000px;">blank space</div>blank space

但有了这个jQuery代码的问题是，这个作品，但它忽略了第一个选项卡是隐藏的，所以新打开的选项卡是在不同的地方，所以用户跳到另一个更低的地方然后选项卡。

Answer 1

你只是需要从代码

$(document).ready(function() { 
 
    $("label").click(function() { 
 
    $('html, body').delay(1000).animate({ 
 
     scrollTop: $(this).offset().top 
 
    }, 500); 
 
    }); 
 
});

.tab { 
 
    position: relative; 
 
    margin-bottom: 6px; 
 
    width: 100%; 
 
    color: #fff; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
} 
 

 
input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0 0 0 4em; 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    line-height: 2.5; 
 
    cursor: pointer; 
 
    color: #000; 
 
} 
 

 
.tab-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: max-height .35s; 
 
    -o-transition: max-height .35s; 
 
    transition: max-height .35s; 
 
    padding: 0px 20px 00px 20px; 
 
} 
 

 
input:checked~.tab-content { 
 
    max-height: 9000px; 
 
} 
 

 
label::after { 
 
    position: absolute; 
 
    left: 23px; 
 
    top: 3px; 
 
    display: block; 
 
    width: 31px; 
 
    height: 45px; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
input[type=radio]+label::after { 
 
    content: url(../images/up.png); 
 
} 
 

 
input[type=radio]:checked+label::after { 
 
    transform: rotateX(180deg); 
 
} 
 

 
input[type=radio]:checked+label { 
 
    color: #e79f39; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="tab"> 
 
    <input id="tab-1" type="radio" name="tabs2"> 
 
    <label for="tab-1">Tab 1</label> 
 
    <div class="tab-content"> 
 
    Content<div style="height:2000px;">spaace</div>space 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-2" type="radio" name="tabs2"> 
 
    <label for="tab-2">Tab 2</label> 
 
    <div class="tab-content"> 
 
    Content 
 
    </div> 
 
</div> 
 
blank space