引导程序切换折叠未知ID

debugcn 发表于 Dev

勒克斯

我正在使用引导程序，尝试data-toggle="collapse"在要单击的容器旁边创建一个容器。由于我正在生成数据库结果的列表，因此列表可能会很大，所以我不想在其上浪费ID。我已经尝试过这样的事情：

<a class="list-group-item accordion-toggle" data-toggle="collapse" href="javascript:return $(this).next();">
<div class="card-collapse collapse in">
  <div class="card-body">
    Hello
  </div>
</div>

我在这里错过了一些东西，因为它不起作用。有关如何执行此操作的任何想法？

更新：我正在寻找的是使它href="javascript:return $(this).next();"针对下一个元素。

更新2：我的目标是，单击链接应在以下位置切换折叠<div class="card-collapse collapse in">

勒克斯

通过在该页面上放置一个小脚本来获得解决方案。

<script>
  $('.accordion-toggle').on('click', function() {
    $(this).next('div.collapse').slideToggle();
  });
</script>

我还添加$('.collapse').slideUp();了该功能的第一行，以仅打开一个项目。

$('.accordion-toggle').on('click', function() {
  if($(this).next('div.collapse').is(':hidden')) {
    $('.collapse').slideUp();
  }
  $(this).next('div.collapse').slideToggle();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="list-group w-100">
  <a class="list-group-item accordion-toggle" data-toggle="collapse" href="#"><h3>Entry 1</h3></a>
  <div class="list-group-item collapse in">
    <p>Some details on entry 1.</p>
  </div>
  <a class="list-group-item accordion-toggle" data-toggle="collapse" href="#"><h3>Entry 2</h3></a>
  <div class="list-group-item collapse in">
    <p>Some details on entry 2.</p>
  </div>
  <a class="list-group-item accordion-toggle" data-toggle="collapse" href="#"><h3>Entry 3</h3></a>
  <div class="list-group-item collapse in">
    <p>Some details on entry 3.</p>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。