將內容推到左邊以顯示刪除按鈕

Question

我該如何去做這件事;

這是我目前的WIP：

https://jsfiddle.net/Lg0wyt9u/967/

<li> 
     <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div> 
     <div class='details'> 
     <div class='date'>date</div> 
     <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div> 
     </div> 
     <div class='value'>1.2</div> 
    <div class='slide-in'> 
     DELETE 
    </div> 
    </li> 

刪除按鈕被隱藏的時刻。

應該發生什麼，它會被透露出來，而其他內容會被推到「畫布外」到與此元素相同的寬度。但是，我不確定如何繼續。我使用display：flex並嘗試了一些定位，但沒有奏效。

Answer 1

在這裏你去： -

$(document).ready(function(){ 
 
    $('.list ul li .rw').click(function(){ 
 
    \t console.log(this); 
 
     $(this).css("right","65px"); 
 
     $('.slide-in').css("display","block"); 
 
    }) 
 
})

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
} 
 

 
.rw{ 
 
    padding-top: 20px; 
 
    width:100%; 
 
    cursor:pointer; 
 
    position:absolute; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #a1d1b8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.type { 
 
    padding-right: 15px; 
 
    flex: 0 0 50px; 
 
    background: green; 
 
} 
 

 
.type i { 
 
    font-size: 40px; 
 
} 
 

 
.details { 
 
    flex: 1; 
 
    overflow: hidden; 
 
    font-family: "Courier New"; 
 
} 
 

 
.address { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
.value { 
 
    padding-left: 15px; 
 
    font-size: 55px; 
 
} 
 

 
.date { 
 
    font-weight: bold; 
 
    margin-bottom: 5px; 
 
} 
 
.slide-in { 
 
    width:65px; 
 
    background: red; 
 
    color: #fff; 
 
    display:none; 
 
}

<div id="container"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li> 
 
     <div class="rw"> 
 
      <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div> 
 
      <div class='details'> 
 
      <div class='date'>date</div> 
 
      <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div> 
 
      </div> 
 
      <div class='value'>1.2</div> 
 
      <div class='slide-in'> 
 
      DELETE 
 
     </div> 
 
      </div> 
 
     
 
       
 
     
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

您已經包括jQuery的這個解決方案...