Question

我有一个与Bootstraps列表组类一起显示的链接列表。我正在尝试将超棒的字体图标添加到链接之一。我有jQuery代码，它将在单击时更改图标。问题是，如果我将跨度添加到链接中以容纳图标，该图标将显示在下一行。我发现这是由于display：block行造成的。如果删除该图标，该图标将与链接显示在同一行上，但是链接的整体格式将失去列表组的外观。这是我的jsfiddle。您可以看到具有股票类的第一个div在下一行显示图标，而具有我的类的第一个div在一行显示图标。

我不知道如何使用jsfiddle来显示链接的实际外观，但我希望这不会影响答案。有没有办法使它正常工作，还是应该更改图标代码以将onclick与javascript函数一起使用？

    <style>
    .my-list-group-item {
     position: relative;
     /*display: block;*/
     padding: 0px 15px; /* adjust here */
     margin-bottom: -1px;
     border: 1px solid #ddd;
     line-height: 1em /* set to text height */
    }
    </style>

    <div class="list-group list-group-flush">
    <div>
    <a class="list-group-item list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-1"></span>
    </div>

    <div>
    <a class="my-list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-2"></span>
    </div>
    </div>

    <script>
    $(".more").click(function() {  

     var id = this.id;
     $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
    });
    </script>

Answer 1

代码中的所有内容都可以，这都与设计有关。所以我为您找到了两种方法：

1-在标签中带有发送范围标签：

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});

.float-left {
  float: left;
}
.cen {
  height: 100% !important;
  padding : 5px;
  padding-left : 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<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 list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-1"></span>
</a>
</div>

2-i使用z-index和负边距：

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});

span {
  margin-top : -30px !important;
  z-index : 1;
  padding-left : 10px;
  width : 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1</a>
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-2">

</span>
</div>

我希望它可以解决您的问题或给您一个想法。

引导程序列表组项目显示

1 个答案: