css - 我想摆脱列表组中的多余空间

我正在尝试学习如何构建侧边栏。

展开后，我在第3项下得到了一个不需要的矩形区域。

我想摆脱这个空白的矩形区域。

我没有在代码中添加任何填充，没有CSS。我试图进行浏览器检查，但没有解决它。

我要删除此空白矩形区域。

谢谢。

代码在这里（也在下面的链接中引用）：


      

      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-success">
                   Item 1</a>
        <a ref="#" class="list-group-item list-group-item-success">
                   Item 2</a>
        <a href="#IDp_3" class="list-group-item list-group-item-success"
           data-toggle="collapse"
           onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
           <i class="fas fa fa-plus-square" id="PM0001" ></i>
                    Item 3
           <div class="collapse" id="IDp_3">
           <a href="" class="list-group-item">
                   -3.1</a>
            <a href="" class="list-group-item">
                   -3.2</a>
            <a href="" class="list-group-item">
                   -3.3</a>
      </div?
    <div>
</div>

JS Fiddle code with problem.

最佳答案

项目3之后关闭锚点

<a href="#p_3" class="list-group-item list-group-item-success" data-toggle="collapse"  onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
                    <i class="fas fa fa-plus-square" id="PM0001" ></i>
                        Item 3
                        </a>

小提琴：https://jsfiddle.net/5vfxpt6b/