在觸摸設備上切換列表元素的視圖

我正試圖處理某種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

在觸摸設備上切換列表元素的視圖

回答

相關問題