兩個元素之間的箭頭

-1

我想要一個連接擴展後的Flex項目的箭頭（當點擊它們時Flex項目會展開爲一個完整的行，請運行代碼）。箭頭必須是連接最後一個未擴展元素和擴展元素的向下箭頭。兩個元素之間的箭頭

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>

來源

2017-03-03 darsh

既然你想一個向下的箭頭添加到目標元素，你可以CSS屬性添加到flexActive。

將此項添加到CSS。

.flexActive:after{ 
    content: '\21E2'; 
    color:black; 
    position:absolute; 
    top:-80px; 
}

FIDDLE

來源

2017-03-03 07:36:52

兩個元素之間的箭頭

回答

相關問題