Pfeile zwischen zwei Elementen

Question

Ich möchte einen Pfeil, der das erweiterte Flex-Element verbindet (Die Flex-Elemente werden beim Klicken auf eine vollständige Zeile erweitert. Bitte führen Sie den Code aus.). Der Pfeil muss ein nach unten zeigender Pfeil sein, der das letzte nicht erweiterte Element und das erweiterte Element verbindet.

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>

Answer 1

Da Sie einen Pfeil nach unten auf das Zielelement hinzufügen Sie CSS-Eigenschaft auf den flexActive hinzufügen können.

Fügen Sie dies dem CSS hinzu.

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

FIDDLE