我是 JavaScript 和 jQuery 新手。我有这个 Accordion html/js，效果很好，但它适用于移动设备，我需要制作它，以便当单击标题时，它将向下滚动到单击的元素/内容的顶部。我假设我需要用 ID 包装它，并使用 JS 将其包装在链接到该 ID 的 anchor 中，但我不确定如何操作。
代码笔: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>最佳答案
使用 anchor 标记代替 h6
<a href="#heading1" id="heading1">
heading 1
</a>
在这里查看: http://codepen.io/prakash_kumar/pen/MyJbmy#0
如果不需要滚动动画，则删除 animate jquery 代码。
关于javascript - 创建 Accordion 选项卡并动态添加 ID 和链接以锚定到 jQuery 中的 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36050792/