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

我正试图处理某种HTML无序列表上的切换视图效果。我试图做的是在LI内使用jquery（而不是jquery mobile）切换DIV视图，当我在触摸屏设备上触摸它并在当前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/

来源

2014-10-09 Crash Override

你想要的情况下有什么功能，当用户点击ITEM2（此事件上DIV2将可见，div1将隐藏），然后再次用户单击item2。 – Ashish 2014-10-09 19:55:42

好吧，如果你点击div2，什么都不会发生，因为这个想法是在div2中有一些按钮，它不会与当前列表 – 2014-10-09 19:59:09

很好地交互。关于您的要求还有一个问题/理解。如果用户点击item1然后在item2上，然后在item3上，那么所有这些li的div2将可见，然后如果用户点击屏幕上的其他位置，则您希望所有div2隐藏并显示所有div1。我对你的要求是否正确？ – Ashish 2014-10-09 20:00:57

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

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

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

感谢大家的帮助我

来源

2014-10-10 04:39:30

很好的描述。 – Ashish 2014-10-10 08:23:10

按你想与DIV2显示和隐藏DIV1当李被窃听我的理解正常工作（例 - 自来水事件在“item2”上，“item2”的“div1”应该隐藏，“item2”的“div2”应该可见）。并且只有当用户点击li外的某处（在您提问中提到的任何LI之外）时，您才想显示“div1”并隐藏“div2”。

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

$(".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/

在我给边境李只是为了说明它的小提琴。

来源

2014-10-09 19:48:03 Ashish

嗨，谢谢你的回答，它的效果很好，但我没有提到的是每个'li'都是以编程的方式创建的，而且当我点击另一个'li'时，我想隐藏打开的'li'名单。我用一个工作示例更新了我的答案，以说明我想实现的目标。 – 2014-10-10 02:11:16

尝试悬停。它也应该适用于触控设备。

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

来源

2014-10-09 20:03:18

感谢您的回答，您不能在'on'事件中使用'悬停'，而必须使用mouseenter，mouseleave方法。我已经尝试过你的解决方案，它在触摸设备上不能很好地工作，这似乎是一个很好的解决方案，但我认为最好的方法是使用'点击'事件或类似的东西。 – 2014-10-10 02:03:41

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

回答

相关问题