ListGroup两个链接

.btn {
box-shadow: none !important;
outline: 0;
}

.list-group-item span {
border: solid #222;
border-width: 0 1px 1px 0;
display: inline;
cursor: pointer;
padding: 3px;
position: absolute;
right: 0;
margin-top: 10px;
}

.list-group-item a.btn.collapsed span {
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transition: .3s transform ease-in-out;
}

.list-group-item a.btn span {
transform: rotate(-140deg);
-webkit-transform: rotate(-140deg);
transition: .3s transform ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
<div class="col">
<div class="my-5">
<ul class="list-group list-group-flush">

<li class="list-group-item px-0">
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
Link with href<span class="mr-3"></span>
</a>
<div class="collapse" id="collapseExample1">
<div class="card card-body mt-2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</li>

<li class="list-group-item px-0">
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
Link with href<span class="mr-3"></span>
</a>
<div class="collapse" id="collapseExample2">
<div class="card card-body mt-2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</li>

<li class="list-group-item px-0">
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
Link with href<span class="mr-3"></span>
</a>
<div class="collapse" id="collapseExample3">
<div class="card card-body mt-2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</li>

</ul>
</div>
</div>
</div>
</div>


</body>

</html>

如何在文本中添加指向另一个页面的附加链接：与href链接？

<li class="list-group-item px-0"> <a class="btn collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3"> <a href="someURL">Link with href</a> <span class="mr-3"></span> </a>

它不起作用。我需要在李内部，有一个链接在"箭头"；显示div了解更多信息，但其中显示的文本链接为href，有另一个链接，指向另一个页面。在我尝试的例子中，它不起作用，因为它都是去中心化的，如果我必须放两个，它会扰乱布局

不幸的是，在HTML5中，将锚标记嵌套在另一个锚标记中是非法的。你想用布局完成什么还不是百分之百清楚。它可能有助于提供实体模型或线框。

为了向您展示这是可能的，您可以使用定位来产生一种错觉，即一个锚点嵌套在另一个锚点中。这里有一个例子：

CSS

li {
position: relative;
height: 70px;
width: 300px;
background-color: gray;
list-style: none;
}
.big {
display: flex;
position: absolute;
z-index: 1;
color: white;
height: 70px;
width: 300px;
background-color: blue;
}
.small {
position: absolute;
z-index: 2;
bottom: 10px;
height: 30px;
background-color: white;
}

HTML

<li>
<a href="google.com" class="big">Big anchor</a>
<a href="facebook.com" class="small">Small anchor</a>
</li>

您可以在此处查看演示：https://jsfiddle.net/j0eq6bxr/14/

同样，如果你提供一些你试图实现的目标的视觉例子，我可能会给你一些更接近你想要的东西。

相关内容

最新更新

热门标签：