我想要一个箭头连接展开的弹性项目。(弹性项目在点击它们时会扩展到一个完整的行。请运行代码。)。箭头必须是连接最后一个未展开元素和展开元素的向下箭头。
2nd element clicked:
|--------|
| |-----| 1st row
|1st ele | |
|--------| |
\/
|------------------------|
->| |--> 2nd row
| 2nd |
|------------------------|
|--------| |--------|
->| |----->| |-----> 3rd row
| 3rd | | 4th |
|--------| |--------|
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('abc'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.fulex{
display: flex;
//white-space: nowrap;
width: 100%;
height: 100%;
position: relative;
}
.flex-container {
padding: 0;
margin: 0;
//display:none;
list-style: none;
-webkit-flex-direction: row;
/* Safari */
flex-direction: row;
flex-wrap: wrap;
// width:600px;
}
.flex-item {
background: green;
//display:flex;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
margin-bottom:50px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
position: relative;
}
.flexActive {
width: auto;
display: block;
flex: 1 1;
margin-right: 0;
}
ul li {
display: inline;
}
.flex-item {
margin-left: .75em;
}
.flex-item:not(:first-child):before {
content: '\21E2';
color: black;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulex">
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
</div>
答案 0 :(得分:0)
由于您想向目标元素添加向下箭头,您可以将css属性添加到flexActive
。
将此添加到CSS。
.flexActive:after{
content: '\21E2';
color:black;
position:absolute;
top:-80px;
}
<强> FIDDLE 强>