Accordion 里面有 Accordion 。我想从 Accordion 的标题到最后一个子 Accordion 的元素绘制垂直线，从垂直线到每个子 Accordion 的元素绘制水平线。
这是我的:
<div id="accordion3" class="collapseblock">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingGeneral" data-toggle="collapse" data-target="#collapseGeneralTab" aria-expanded="false" aria-controls="collapseGeneralTab">
Test1
</span>
</div>
<div id="collapseGeneralTab" class="collapse" aria-labelledby="headingGeneral" data-parent="#accordion3">
<div class="cardsmall-content">
Example1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingCurrency" data-toggle="collapse" data-target="#collapseCurrency" aria-expanded="false" aria-controls="collapseCurrency">
Test2
</span>
</div>
<div id="collapseCurrency" class="collapse" aria-labelledby="headingCurrency" data-parent="#accordion3">
<div class="cardsmall-content">
<div id="accordion4" class="collapseblock">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingOffers" data-toggle="collapse" data-target="#collapseOffers" aria-expanded="false" aria-controls="collapseOffers">
Test2.1
</span>
</div>
<div id="collapseOffers" class="collapse" aria-labelledby="headingOffers" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingPricing" data-toggle="collapse" data-target="#collapsePricing" aria-expanded="false" aria-controls="collapsePricing">
Test2.2
</span>
</div>
<div id="collapsePricing" class="collapse" aria-labelledby="headingPricing" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我想得到的:
我怎样才能做到这一点？
最佳答案
这是一个使用一些背景和伪元素的想法。如果是多行内容或更多嵌套元素，您可能需要进行一些调整。
.cardsmall {
background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px) no-repeat;
display: table;
margin-bottom: 3px;
margin-left: 20px;
margin-top: 10px;
}
.cardsmall .cardsmall {
margin-top: 0;
}
.cardsmall {
position:relative;
}
.cardsmall .cardsmall:before {
content: "";
position: absolute;
top: 13px;
right: calc(100% + 3px);
width: 30px;
height: 2px;
background: #000;
}
.cardsmall .cardsmall:last-child:after {
content: "";
position: absolute;
top: 15px;
right: calc(100% + 5px);
width: 30px;
height: 100vh;
background: #fff;
}
.cardsmall-header .arrowed {
display: inline-block;
position: relative;
cursor: pointer;
}
.cardsmall-header .arrowed:after {
content: "\f078";
display: inline-block;
font-family: 'FontAwesome';
position: relative;
right: 0;
transition: all 0.3s;
}
.arrowed[aria-expanded="true"]:after {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.cardsmall-header {
border-radius: calc(.25rem - 1px);
}
.cardsmall-content {
padding: 10px 5px 5px 20px;
background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
overflow: hidden;
}
.collapseblock {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div id="accordion3" class="collapseblock">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest1" data-toggle="collapse" data-target="#collapseTest1Tab" aria-expanded="false" aria-controls="collapseTest1Tab">
Test1
</span>
</div>
<div id="collapseTest1Tab" class="collapse" aria-labelledby="headingTest1" data-parent="#accordion3">
<div class="cardsmall-content">
Example1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest2" data-toggle="collapse" data-target="#collapseTest2" aria-expanded="false" aria-controls="collapseTest2">
Test2
</span>
</div>
<div id="collapseTest2" class="collapse" aria-labelledby="headingTest2" data-parent="#accordion3">
<div class="cardsmall-content">
<div id="accordion4" class="collapseblock">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest21" data-toggle="collapse" data-target="#collapseTest21" aria-expanded="false" aria-controls="collapseTest21">
Test2.1
</span>
</div>
<div id="collapseTest21" class="collapse" aria-labelledby="headingTest21" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest22" data-toggle="collapse" data-target="#collapseTest22" aria-expanded="false" aria-controls="collapseTest22">
Test2.2
</span>
</div>
<div id="collapseTest22" class="collapse" aria-labelledby="headingTest22" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>这是添加的相关 CSS:
.cardsmall {
background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px) no-repeat;
}
.cardsmall .cardsmall {
margin-top: 0;
}
.cardsmall {
position:relative;
}
.cardsmall .cardsmall:before {
content: "";
position: absolute;
top: 13px;
right: calc(100% + 3px);
width: 30px;
height: 2px;
background: #000;
}
.cardsmall-content {
background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
overflow:hidden; /*needed to hide the overflow of the after element below*/
}
/*This is to hide the line when the last child is expanded*/
.cardsmall .cardsmall:last-child:after {
content: "";
position: absolute;
top: 15px;
right: calc(100% + 5px);
width: 30px;
height: 100vh;
background: #fff;
}
/**/
关于html - 在 Accordion 中画线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54275375/