Выпадающее меню Jquery / CSS не отвечает на iPad / iPhone - PullRequest
Новая
       14

Выпадающее меню Jquery / CSS не отвечает на iPad / iPhone

5 голосов
/ 07 февраля 2012

Я разрабатывал и кодировал свой веб-сайт, и простое раскрывающееся меню не работает при просмотре сайта на iPad или iPhone.

Я осмотрелся и попытался реализовать некоторые из решений, которые доступны онлайн, например фрагменты jquery, которые распознают, когда пользователь использует определенное устройство, но безрезультатно. Я не уверен, если это потому, что эти методы устарели или потому что я делаю это неправильно (вероятно, последний)

Сайт, о котором идет речь, http://www.sotomayormac.com

верхний пункт меню: «Наше мышление» опускается в подменю через ссылку href = #. Он подсвечивается (a: hover), когда его касаются на iPad / iPhone, но подменю не появляется. Я почти уверен, что это ключевая часть проблемы.

HTML-код для меню выглядит следующим образом: 

 <!-- Start of MENU -->
 <ul id="ddmenu">
<li><a id="topLink" href="#">Our thinking</a>
<ul>
    <li><a href="index.html">Showcase</a></li>
    <li><a href="about.html">About us</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
</li>

соответствующий CSS: 

#ddmenu {
background: #fff no no-repeat;
margin-left:50px;
padding: 0;
height:43px;
width:200px;
}

#ddmenu li {
float: left;
list-style: none;
margin-left:0px;
}

#ddmenu li a {
background:#fff;
display: block;
padding: 0px 0px;
text-decoration: none;
width: 70px;
color:#000;
white-space: nowrap;
text-align:left;
}

#ddmenu li a:hover {
background: #fff;
color:#666;
}

#ddmenu li ul {
margin: 10px 0 0 0px;
padding: 0;
position: absolute;
visibility: hidden;
width:600px;
}

#ddmenu li ul li {
display:inline;
}

#ddmenu li ul li a {
width: auto;
background: #fff  right no-repeat;
display: inline;
color: #000;
padding-right:10px;
}

#ddmenu li ul li a:hover {
background: #fff no-repeat;
color:#666;
}

и jquery: 

// <![CDATA[
var timeout    = 500;
var closetimer = 500;
var ddmenuitem = 0;

function ddmenu_open(){
    ddmenu_canceltimer();
       ddmenu_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}

function ddmenu_close(){
    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}

function ddmenu_timer(){
    closetimer = window.setTimeout(ddmenu_close, timeout);
}

function ddmenu_canceltimer(){
    if(closetimer){
        window.clearTimeout(closetimer);
            closetimer = null;
}}

$(document).ready(function(){
    $('#ddmenu > li').bind('mouseover', ddmenu_open)
    $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
});

document.onclick = ddmenu_close;
// ]]>

Я думаю, вот и все. Я новичок в такого рода вещах, поэтому любая помощь будет высоко ценится. Это, вероятно, смотрит мне прямо в лицо, но я не могу понять это!

Приветствия

ВСЕ jscript: 

$(document).ready(function() {

});
$("#slideshow").css("overflow", "hidden");

$("ul#slides").cycle({
fx: 'fade',
speed: 2000,
timeout: 8000,
pause: true,
prev: '#prev',
next: '#next',
after:     onAfter
});

function onAfter(curr,next,opts) {
var caption =(opts.currSlide + 1) + ' / ' + opts.slideCount;
$('#caption').html(caption);
}

$(".button").hover(function() {
    $(this).attr("src","socialnetworks_hover_03.gif");
        }, function() {
    $(this).attr("src","socialnetworks_05.gif");
});

// <![CDATA[
var timeout    = 500;
var closetimer = 500;
var ddmenuitem = 0;

function ddmenu_open(){
    ddmenu_canceltimer();
       ddmenu_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}

function ddmenu_close(){
    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}

function ddmenu_timer(){
    closetimer = window.setTimeout(ddmenu_close, timeout);
}

function ddmenu_canceltimer(){
    if(closetimer){
        window.clearTimeout(closetimer);
            closetimer = null;
}}

var toggle_clicked = false;
function ddmenu_toggle(){
if(toggle_clicked) {
    toggle_clicked = false;
    ddmenu_timer();
} else {
    toggle_clicked = true;
    ddmenu_open();
}
}

$(document).ready(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||              (navigator.userAgent.match(/iPad/i))) { 
    $('#ddmenu > li').bind('click', ddmenu_toggle);
} else {
    $('#ddmenu > li').bind('mouseover', ddmenu_open);
    $('#ddmenu > li').bind('mouseout',  ddmenu_timer);  
}
});

document.onclick = ddmenu_close;
// ]]>

Ответы [ 2 ]

4 голосов
/ 07 февраля 2012

iPad / iPhone не поддерживает mouseover, mouseout события.

Вам необходимо использовать click событие или touchstart, touchend для мобильных браузеров с поддержкой сенсорного экрана.

Например, для устройства iPad / iPhone напишите $('#ddmenu > li').bind('click', ddmenu_open) вместо $('#ddmenu > li').bind('mouseover', ddmenu_open)

ОБНОВЛЕНИЕ :

Замените код: 

$(document).ready(function(){
    $('#ddmenu > li').bind('mouseover', ddmenu_open)
    $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
});

к этому: 

var toggle_clicked = false;
function ddmenu_toggle(){
    if(toggle_clicked) {
        toggle_clicked = false;
        ddmenu_timer();
    } else {
        toggle_clicked = true;
        ddmenu_open();
    }
}

$(document).ready(function(){
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { 
        $('#ddmenu > li').bind('click', ddmenu_toggle);
    } else {
        $('#ddmenu > li').bind('mouseover', ddmenu_open);
        $('#ddmenu > li').bind('mouseout',  ddmenu_timer);  
    }
});
0 голосов
/ 07 февраля 2012

Вы используете mouseover и mouseout, которые не поддерживаются на сенсорных экранах.

См. Документацию о сенсорных событиях Apple JavaScript .

Вы можете использовать это так: 

document.addEventListener('touchstart', function(e) {
    // Do sth.
}, false);
...