Переключить вид элементов списка на сенсорных устройствах

Question

Я пытаюсь разобраться с каким-то эффектом переключения на неупорядоченный список HTML. То, что я пытаюсь сделать, - это преобразовать в LI, используя jquery (не jQuery mobile), когда я касаюсь его на устройстве с сенсорным экраном и восстанавливаю вид при нажатии в другом месте за пределами текущего 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», «див1» должен скрыть и «div2» должно быть видно, внутри «div2» некоторые кнопки, которые вы можете взаимодействовать с. Но тогда, когда я прикасаюсь к «item2», «div1» должен быть снова виден, а «div2» должен скрываться. Я пробовал использовать nouseenter и mouseleave с jquery, но это вызывает беспорядок, когда вы пытаетесь прокрутить или коснитесь других элементов LI в том же списке, а также попытались использовать toggle, но пока не повезло. Теперь я не могу найти простой, но эффективный способ добиться того, чего хочу, надеюсь, вы, ребята, можете мне помочь в этом.

Спасибо!

EDIT: Вот рабочий пример, который не работает должным образом на сенсорных устройствах http://jsfiddle.net/T5HMt/44/

Answer 1

Ну, похоже, я нашел способ решить мою собственную проблему с решением, очень похожим на решение, предоставленное 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 2

По моему разумению вы хотите соответствующий div2, чтобы показать и скрыть Div1 когда Ли касание (ПРИМЕР- По событию крана на «item2», «div1» из «item2» должен скрываться, и «div2» из «item2» должен быть видимым). И вы хотите показать «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/

В скрипке я дал границу с LI только для иллюстрации.

Answer 3

Попробуйте hover. Он должен работать и для сенсорных устройств.

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