jq實現左滑顯示刪除按鈕,點擊刪除實現刪除資料功能(推薦)，jq按鈕

jq實現左滑顯示刪除按鈕,點擊刪除實現刪除資料功能(推薦)，jq按鈕

第一步：載入

<script src="js/jquery.min.js"></script><script src="js/jquery.mobile-1.3.2.min.js"></script>

第二步：html

<div class="item-wrap">  <div class="item clearfix">    <div class="img-item">      <img src="images/icon.png">    </div>    <div class="txt-item">      <p class="name">         小黃人      </p>      <p class="txt">        小黃人小黃人小黃人小黃人      </p>    </div>    <i class="arrow"></i>    <a class="delect-btn">刪除</a>  </div>  <div class="item clearfix">    <div class="img-item">      <img src="images/icon.png">    </div>    <div class="txt-item">      <p class="name">         小黃人      </p>      <p class="txt">        小黃人小黃人小黃人小黃人      </p>    </div>    <i class="arrow"></i>    <a class="delect-btn">刪除</a>  </div></div>

第二步：css

.item-wrap{  overflow: hidden; } .item-wrap .item{  border-bottom: 1px #fff solid;  background: #000;  width: 125%;  overflow: hidden;  position: relative;  display: -webkit-box;  -webkit-transition: all 0.3s linear; } .item-wrap .item .img-item{  width: 50px;   height: 50px;  margin: 10px; } .item-wrap .item .img-item img{  width: 100%;  border-radius: 50%; } .item-wrap .item .txt-item{  padding-top: 10px;  margin-right:25px;  font-size: 14px;  line-height: 24px;  color: #fff;  -webkit-box-flex:1; }.item-wrap .item .arrow{  width: 0;  height: 0;  line-height: 0;  font-size: 0;  border-style: solid;  border-color: transparent transparent transparent #fff;  border-width: 8px 0px 8px 8px;  position: absolute;  right: 22%;  top: 50%;  margin-top: -8px;}.delect-btn{  width: 20%;  margin-left: 15px;  color: #fff;  background: #0f0;  z-index:999;  display: block;  text-align: center;  padding-top: 5%;}.item-wrap .selected{  -webkit-transform: translate(-16%);  -webkit-transition: all 0.3s linear;}

第二步：jq

<script>  $(".item").on('swipeleft', function(event) {    event.preventDefault();    /* Act on the event */    $(this).addClass('selected').siblings('.item').removeClass('selected');    $(this).find('.delect-btn').on('click', function(event) {      event.preventDefault();      /* Act on the event */      $(this).parent(".item").animate({        height: 0,        width: 0},        300, function() {        /* stuff to do after animation is complete */        $(this).remove();      });    });  });  $(".item").on('swiperight', function(event) {    event.preventDefault();    /* Act on the event */    $(this).removeClass('selected');  });</script>

以上這篇jq實現左滑顯示刪除按鈕,點擊刪除實現刪除資料功能(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。