我是js / jquery的新手，我有点卡住了。我有这个手风琴html / js很好但是它适用于移动设备，我需要在点击标题时这样做，它会向下滚动到所点击的元素/内容的顶部。我假设我需要用ID包装它并使用JS将它包装在链接到该ID的锚中，但我不确定如何。
codepen：http://codepen.io/anon/pen/QNdGGL
var accordionContent = $('.accordion p');
$('.accordion h6').click(function() {
// Check if current accordion item is open
var isOpen = $(this).next().is(":visible");
// Hide all accordion items
accordionContent.hide();
// Open accordion item if previously closed
if (!isOpen) {
$(this).nextUntil('h6').show();
}
});
$('.accordion h6').first().trigger('click');.accordion h6 {
display: block;
cursor: pointer;
background: black;
padding: 10px;
color: #fff;
}
.accordion p {
display: none;
margin: 0;
padding: 0 0 1em;
}
.accordion * {
display: none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
<h6>heading 1</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>
<h6>heading 2</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>
<h6>heading 3</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>
</div>
答案 0 :(得分：0)
使用锚标记代替h6
<a href="#heading1" id="heading1">
heading 1
</a>
点击这里： http://codepen.io/prakash_kumar/pen/MyJbmy#0
如果不需要滚动动画，则删除动画jquery代码。
答案 1 :(得分：0)
我自己解决了问题，这是解决方案：
var headers = $("#tab_description h6");
var accordionContent = $('#tab_description p, #tab_description ul, #tab_description iframe, #tab_description div');
$(headers).each(function(i) {
$(this).append('<a href="#accordion_'+(i+1)+'" id="accordion_'+(i+1)+'"></a>');
});
$('#tab_description h6').click(function() {
// Check if current accordion item is open
var isOpen = $(this).next().is(":visible");
// Hide all accordion items
accordionContent.hide();
// Open accordion item if previously closed
if (!isOpen) {
$(this).nextUntil('h6').show();
}
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
$('#tab_description h6').first().trigger('click');