css - 我想摆脱列表组中的额外空间

Question

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

当元素 3 展开时，我在元素 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.

Answer 1

在元素 3 之后关闭 anchor

<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>

fiddle :https://jsfiddle.net/5vfxpt6b/