创建折叠选项卡并动态添加 ID 和指向 jQuery 中 ID 锚点的链接

Creating accordion tabs and add IDs dynamically and links to anchor to IDs in jQuery

本文关键字：ID jQuery 链接 选项 折叠 添加 动态 创建      更新时间：2023-09-26

我是JavaScript和jQuery的新手。 我有这个手风琴html/js，效果很好，但它适用于移动设备，我需要这样做，以便在单击标题时，它将向下滚动到单击的元素/内容的顶部。我假设我需要用 ID 包装它并使用 JS 将其包装在链接到该 ID 的锚中，但我不确定如何。

代码笔：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>

使用锚标记而不是 h6

<a href="#heading1" id="heading1">
    heading 1
</a>

在这里查看：http://codepen.io/prakash_kumar/pen/MyJbmy#0

如果不需要滚动动画，请删除动画 jquery 代码。

我自己解决了，这是解决方案：

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');
相关文章：