在移動設備上第二次單擊時刪除項目（jQuery）

Question

我的UL在其LI上具有懸停效果。 懸停時，左側會出現一個紅色的div，當您單擊LI時，它將一個類切換到其內部的文本。 在台式機版本上都可以，但是當我切換到移動版時，第一次點擊只應激活懸停效果。 取而代之的是，它指示懸停並立即切換課程。 我想在移動版本上進行第一次點擊以激活懸停，然后如果它仍然處於活動狀態，則接下來的點擊將切換課程。 請嘗試在移動版本上使用該代碼，我的意思很清楚。 謝謝

 $('ul').on('click', 'li', function () { $(this).toggleClass('completed'); }); $('ul').on('click', 'div', function (event) { $(this).parent().fadeOut(250, function () { $(this).remove(); }); //prevent event bubbling event.stopPropagation(); }); 

 .container { width: 360px; margin: 0 auto; border: 1px solid black; } ul{ list-style: none; padding:0; margin:0; } li{ width: 100%; border: 1px solid black; display: flex; } li div{ background-color:red; width:0; transition: 0.1s linear; display:inline-block; } li:hover div{ width: 40px; } .completed { color: grey; text-decoration: line-through; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h1>Groceries</h1> <ul> <li><div></div><p>carrot</p></li> <li><div></div><p>onion</p></li> <li><div></div><p>tomato</p></li> </ul> 

更新：我快知道了，第二次點擊時得到了第一個切換，問題是在雙擊時也發生了下一次切換：

var isMobile = false;
var isClicked = 0;

$('ul').on('click', 'li', function () {

   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera 
       Mini/i.test(navigator.userAgent) ) {
          isMobile = true;
          isClicked++;
   }

   if(!isMobile || isClicked > 1){
          $(this).toggleClass('completed');
          isClicked = 0;
   }
});

Answer 1

您應該使用touchstart事件來處理移動設備上的觸摸事件，但不要忘記檢查ontouchstart是否可用。

 $('ul').on('click', 'li', function() { if ('ontouchstart' in document.documentElement) { if ($(this).hasClass('hover')) { $(this).toggleClass('completed'); } } else { $(this).toggleClass('completed'); } }); $('ul').on('touchstart', 'li', function(e) { var link = $(this); //preselect the link if (link.hasClass('hover')) { return true; } else { link.addClass("hover"); $('li').not(this).removeClass("hover"); e.preventDefault(); return false; //extra, and to make sure the function has consistent return points } }); $('ul').on('click', 'div', function(event) { $(this).parent().fadeOut(250, function() { $(this).remove(); }); //prevent event bubbling event.stopPropagation(); }); 

 .container { width: 360px; margin: 0 auto; border: 1px solid black; } ul { list-style: none; padding: 0; margin: 0; } li { width: 100%; border: 1px solid black; display: flex; } li div { background-color: red; width: 0; transition: 0.1s linear; display: inline-block; } li:hover div, li.hover div{ width: 40px; } .completed { color: grey; text-decoration: line-through; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h1>Groceries</h1> <ul> <li> <div></div> <p>carrot</p> </li> <li> <div></div> <p>onion</p> </li> <li> <div></div> <p>tomato</p> </li> </ul> </div> 

Answer 2

首先，對移動設備使用@media查詢禁用CSS懸停功能。

第二個創建一個jquery方法來點擊/單擊

您要顯示紅色div的位置。 你可以做這樣的事情

 $('li').on('click' , function(){ if($(window).width() <= 760){ // Enter maximum width of mobile device here for which you want to perform this action // show red div here } return false; }); 

還請記住@media和$（window）.width（）應該具有相同的像素/大小

編輯：

嘗試替換這個

 var isMobile = false; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { isMobile = true; } $('ul').on('click', 'li', function () { if(isMobile){ $(this).toggleClass('completed'); } }); 

並在click函數中讓其他代碼再試一次