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查询禁用hover。

其次创建一个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');
   }
});

让点击功能中的其他代码再试一次

删除第二次移动设备上的项目（jQuery）

2 个答案: