在兩個彈性項目之間繪製箭頭

Question

我希望在添加箭頭時在兩個彈性項目之間插入箭頭（請運行代碼）。必須在第一個Flex項目之後添加它們之間的每個添加的Flex項目，以便它們通過箭頭顯示連接。箭頭必須位於連接它們的盒子邊界的中點（不是盒子中心）。

$('#clickMe').click(function() { 
 
    $('#Demosss').append($('<li class="flex-item">').text('text')) 
 
    $(this).insertAfter($('[class^="flex-item"]').last()); 
 
}); 
 

 
$(document).on('click', '.flex-item' ,function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: green; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    
 
} 
 
.flexActive{ 
 
    width:auto; 
 
    display:block; 
 
    flex: 1 1; 
 
    margin-right:0; 
 
} 
 

 
ul li{ 
 
    display: inline; 
 
} 
 

 

 

 

 
.enlarge{ 
 
zoom: 350%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 

 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button> 
 

 
<div class="enlarge"> 
 
<span>&#8674;</span> 
 
</div>

Answer 1

您可以使用僞元素與箭頭content，並從第一個元素排除它，在你的CSS使用:not()。

$('#clickMe').click(function() { 
 
    $('#Demosss').append($('<li class="flex-item">').text('text')) 
 
    $(this).insertAfter($('[class^="flex-item"]').last()); 
 
}); 
 

 
$(document).on('click', '.flex-item' ,function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; 
 
    /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-item { 
 
    background: green; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    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:not(:first-child) { 
 
    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> 
 
<ul id="Demosss" class="flex-container"></ul> 
 

 
<button id="clickMe">Click Me</button>

Answer 2

刪除您的塊元素之間的水平空間，然後將每個插入塊之前有條件地追加箭頭，當你檢測到至少一個塊已添加。

var first = true 
 

 
$('#clickMe').click(function() { 
 
    var demos = $('#Demosss') 
 
    if (!first) { 
 
     demos.append('⇢') 
 
    } else first = false 
 
    demos.append($('<li class="flex-item">').text('text')) 
 
    $(this).insertAfter($('.flex-item').last()); 
 
}); 
 

 
$(document).on('click', '.flex-item', function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: green; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    
 
} 
 
.flexActive{ 
 
    width:auto; 
 
    display:block; 
 
    flex: 1 1; 
 
    margin-right:0; 
 
} 
 

 
ul li{ 
 
    display: inline; 
 
} 
 

 

 

 

 
.enlarge{ 
 
zoom: 350%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 

 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button> 
 

 
<div class="enlarge"> 
 
</div>

Answer 3

嘗試這樣的事情。

$('#clickMe').click(function() { 
 
\t \t  $('#Demosss').append($('<li class="flex-item">').text('text')) 
 
\t \t  $('.enlarge').css('display','none'); 
 
\t \t  $('#Demosss').append($('<div class="enlarge1"><span>&#8674;</span></div>')) 
 
\t \t  $(this).insertAfter($('[class^="flex-item"]').last()); 
 
\t \t }); 
 

 
\t \t $(document).on('click', '.flex-item' ,function(){ 
 
\t \t $(this).toggleClass('flexActive') 
 
\t \t })

.flex-container { 
 
\t  padding: 0; 
 
\t  margin: 0; 
 
\t  list-style: none; 
 
\t  -webkit-flex-direction: row; /* Safari */ 
 
\t  flex-direction: row; 
 
\t  flex-wrap: wrap; 
 
\t } 
 
\t .flex-item { 
 
\t  background: green; 
 
\t  padding: 5px; 
 
\t  width: 100px; 
 
\t  height: 150px; 
 
\t  margin-top: 10px; 
 
\t  margin-right: 15px; 
 
\t  line-height: 150px; 
 
\t  color: white; 
 
\t  font-weight: bold; 
 
\t  font-size: 3em; 
 
\t  text-align: center; 
 
\t  display: inline-block; 
 
\t  
 
\t } 
 
\t .flexActive{ 
 
\t width:auto; 
 
\t display:block; 
 
\t flex: 1 1; 
 
\t margin-right:0; 
 
\t } 
 

 
\t ul li{ 
 
\t display: inline; 
 
\t } 
 

 

 
\t .enlarge1{ 
 
\t \t zoom: 350%; 
 
\t } 
 

 
\t .enlarge{ 
 
\t zoom: 350%; 
 
\t }

<!-- jQuery library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
\t <!-- Latest compiled JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 

 
\t <!-- add LI here --> 
 
\t </ul> 
 

 

 
\t <button id="clickMe">Click Me</button> 
 
\t <div class="enlarge"><span>&#8674;</span></div> 
 
\t <div class="arrow"> 
 
\t </div>