Question

我正在尝试处理HTML无序列表上的某种切换视图效果。我正在尝试做的是在DIV内使用jquery（而不是jquery mobile）切换LI视图，当我在触摸屏设备上触摸它时，当点击当前的其他地方时恢复视图LI。

这是一个HTML示例：

<ul>
  <li class="item1">
     <div class="div1">Info</div>
     <div class="div2" style="display:none;">Tools</div>
  </li>
  <li class="item2">
     <div class="div1">Info</div>
     <div class="div2" style="display:none;">Tools</div>
  </li>
  <li class="item3">
     <div class="div1">Info</div>
     <div class="div2" style="display:none;">Tools</div>
  </li>
</ul>

所以基本上如果我点击“item2”，“div1”应该隐藏，“div2”应该是可见的，“div2”里面是你可以与之交互的一些按钮。但是，当我触摸“item2”之外时，“div1”应该再次可见并且“div2”应该隐藏。我尝试将nouseenter和mouseleave与jquery一起使用，但是当您尝试滚动或点按同一列表中的其他LI元素时，它会导致混乱，也尝试使用toggle ，但到目前为止没有运气。现在我找不到一个简单但有效的方法来实现我想要的东西，希望你们能帮助我。

谢谢！

编辑：以下是一个在触摸设备上无法正常工作的工作示例http://jsfiddle.net/T5HMt/44/

Answer 1

根据我的理解，你想要相应的div2显示并在点击li时隐藏div1（例如 - 在“item2”上点击事件，“item2”的“div1”应隐藏，“item2”的“div2”应该可见）。并且你想显示“div1”并隐藏“div2”只有当用户点击li之外的某个地方时（在问题中提到的任何LI之外）。

请检查此代码是否有帮助。

$(".item1, .item2, .item3").click(function(){
      $(this).children(".div2").css("display", "block");
      $(this).children(".div1").css("display", "none"); 
});

$(document).click(function(e) {
    var target = e.target;
    if (!$(target).parents().is('.item1') && !$(target).parents().is('.item2') && !$(target).parents().is('.item3')) {
         $(".div2").css("display", "none");
          $(".div1").css("display", "block");
    }
});

工作小提琴 - http://jsfiddle.net/Ashish_developer/5jpyzkmt/

在小提琴中，我只是为了说明它而给予边界。

Answer 2

看起来我找到了一种方法来解决我自己的问题，解决方案非常类似于Tushar Raj提供的解决方案。我没有在鼠标上显示隐藏的div，而是在点击事件中显示，然后在鼠标离开时隐藏它。问题是mousenter在触摸屏上同时触发两件事，第一件事就是'mouseenter'事件然后是'touchstart'事件，所以如果你在div里面有链接显示在mouseenter事件，它们也将被“点击”。

$(document).on({
        click: function () {
            $(this).find('.main').hide();
            $(this).find('.second').show();
        },
        mouseleave: function (event) {
            $(this).find('.main').show();
            $(this).find('.second').hide();
        }
    },'.search');

工作example它在触摸屏上按预期工作

感谢大家帮助我

Answer 3

尝试悬停。它也适用于触摸设备。

 $('.item1,.item2,.item3').on('hover',function(){
       $(this).find('.div1').hide();
       $(this).find('.div2').show();
  },function(){
       $(this).find('.div1').show();
       $(this).find('.div2').hide();
  });

在触摸设备上切换列表元素的视图

3 个答案: