JQ se da cuenta del deslizamiento izquierdo Para mostrar el botón Eliminar, haga clic para eliminar para lograr la función de eliminar datos (recomendado)

Diagrama de reproducción

Paso 1: Carga

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

Paso 2: HTML

 <div> <div> <img src = "imágenes/icon.png"> </div> <div> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> </div> <i> </i> <a> delete </a> </iv> <iv> <iv> <iv> src = "imágenes/icon.png"> </div> <div> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> </div> <i> </i> <a> delete </a> </div> </iv>

Paso 2: CSS

 .Item-Wrap {desbordamiento: oculto; } .Item-Wrap .Item {Border-Bottom: 1px #ff sólido; Antecedentes: #000; Ancho: 125%; desbordamiento: oculto; Posición: relativo; Display: -Webkit -Box; -WebKit-Transition: todos los 0.3s lineales; } .Item-Wrap .Item .Img-Item {width: 50px; Altura: 50px; margen: 10px; } .Item-Wrap .Item .Img-Item img {ancho: 100%; Radio fronterizo: 50%; } .Item-Wrap .Item .txt-Item {Padding-top: 10px; margen-derecha: 25px; tamaño de fuente: 14px; Línea-aguja: 24px; Color: #fff; -webkit-box-fllex: 1; } .Item-Wrap .Item .Harrow {ancho: 0; Altura: 0; Línea de altura: 0; tamaño de fuente: 0; estilo fronterizo: sólido; color de borde: transparente transparente transparente #fff; ancho de borde: 8px 0px 8px 8px; Posición: Absoluto; Derecho: 22%; arriba: 50%; margen-top: -8px;}. Delect-btn {ancho: 20%; margen izquierda: 15px; Color: #fff; Antecedentes: #0f0; Índice Z: 999; Pantalla: bloque; Text-Align: Center; Padding-top: 5%;}. item-wrap .selected {-webkit-transform: traduce (-16%); -Webkit-transición: todos los 0.3s lineal;}

Paso 2: JQ

 <script> $ (". item"). on ('swipeleft', function (event) {event.preventDefault (); / * actuar en el evento * / $ (this) .addclass ('seleccionado'). Siblings ('. item'). RemoVeCLass ('seleccionado'); $ (this) .find ('. Delect-btn'). event.preventDefault (); $ (". item"). on ('swiperight', function (event) {event.preventDefault ();/ * actuar sobre el evento */$ (this) .removeclass ('seleccionado');}); </script>

El artículo anterior JQ se da cuenta de que el deslizamiento izquierdo para mostrar el botón Eliminar, haga clic para eliminar para realizar la función Delete Data (recomendado) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.