2013-09-19 3 views
0

Как мне получить li: наведите курсор на правильную работу на мобильных устройствах?li: выпадающее меню hover на мобильных устройствах

На Iphone он даже не открыт, на андроид не закрывает после прикосновения: S

Я хочу создать меню пользовательских раскрывающийся и мне нужно JavaScript, чтобы получить информацию от литий, который кликнули ,

<!DOCTYPE html> 
<title>li:hover dropdown menu on mobile devices</title> 

<style> 
li ul{display:none} 
li:hover ul{display:block} 
</style> 

<ul> 
<li><div id=div>chose</div> 
<ul> 
<li id=li data-info="som data">level 2 
</ul> 
</ul> 

<script> 
window.onload = function(){ 
document.getElementById('li').onclick = function(){ 
document.getElementById('div').innerHTML = document.getElementById('li').getAttribute('data-info'); 
} 
} 
</script> 
+0

В мобильном устройстве нет события hover –

+0

Это нехорошо, как это сделать id = div, закрыть это с помощью цитат, подобных этому id = "div" –

+0

спасибо shakti :) C-Link, в html-5 цитаты arn 't необходимо, если не используются: пробелы, двойные и одиночные кавычки, знак равенства, знак больше, чем знак. Но спасибо за информацию! – user1087110

ответ

0

The: парить псевдо-класс нуждается в указательном (графический ввод) устройстве, способное различать действия указывая и выбор/активирующим. Обычно на мобильных устройствах с сенсорным интерфейсом у вас нет первого, только последнего. Также некоторые интерфейсы ручек позволяют активировать, а не указывать.

Псевдокласс класса hover применяется, когда пользователь назначает элемент (с некоторым указывающим устройством), но не активирует его. Например, визуальный пользовательский агент может применить этот псевдокласс, когда курсор (указатель мыши) нависает над полем, сгенерированным элементом. Пользователям, не поддерживающим интерактивные медиа, не нужно поддерживать этот псевдокласс. Некоторые совместимые пользовательские агенты, поддерживающие интерактивные носители, могут не поддерживать этот псевдокласс (например, перо).

W3C: CSS 2.1: Selectors, dynamic pseudo-classes

Таким образом, чтобы ответить на ваш вопрос: Это зависит от устройства, но скорее всего нет. И не полагайтесь на это. Благодаря тому, что устройства с сенсорным экраном быстро набирают популярность, вы потеряете все события, относящиеся только к указанию.

+0

Вы говорите, что я не должен использовать «выпадающие меню» на мобильных устройствах? Разве нет решения? – user1087110

+0

можете ли вы проверить этот http://getbootstrap.com/examples/navbar/ и изменить размер экрана своего браузера и проверить его –

+0

Тогда я хочу, чтобы решение было javscript. Благодаря :) – user1087110

0

Если вы просто хотите получить многоуровневое меню, работающее над отзывчивым дизайном или мобильной версией, подумайте над этим: jQuery Responsive Menu Plugin он превращает меню списка в выбор. Вы можете указать видовое окно для его ввода, а также меню, которое вы хотите использовать, или даже объединить меню.

Смежные вопросы