1

ホバー時に開く CSS ドロップダウン リストがあり、誰かが iPad や iPhone などの iOS デバイスを使用しているときに問題が発生します。ここで大まかなjFiddleを作成しました：

http://jsfiddle.net/7vtWy/1/

Chrome を搭載した Android デバイスを使用している場合、うまく機能します...メイン メニュー項目をクリックすると、ドロップダウン リストが表示されます。iOSでは、何もありません。モバイルデバイスがある場合、ホバーなどがないため、メインメニューのクリックでドロップダウンが表示されるようにする方法はありますか?

HTML

<header>        
<nav role="navigation" class="clearfix">
        <ul id="nav-site">
            <li>
                <span class="arrow">Shop</span>
                <div class="dropdown_1column">
                    <div class="mainbox clearfix">
                        <ul>
                            <li class="main-category"><a href="new-products/">New Arrivals</a></li>
                            <li class="main-category"><a href="gifts-under-100/">Gifts Under $100</a></li>
                            <li class="main-category"><a href="staff-favorites/">Staff Favorites</a></li>
                            <li class="main-category"><a href="made-in-the-usa/">Made in the USA</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </nav>

CSS

header nav { text-transform: uppercase; width: 980px; font-weight: 700; font-size: 15px;}
header nav a { color: #000; text-decoration: none; }
header nav li { float: left; display: block; position: relative; z-index: 999; }

header nav #nav-site { float: left; }
header nav #nav-site li { padding: 0 10px 3px 0; }
header nav .arrow:hover { cursor: pointer; }
header nav #nav-account { float: right; }
header nav #nav-account li { margin: 0 0 3px 10px; }
header nav #nav-account .cart span { font-weight: 400; font-size: 11px; padding: 2px 4px; display: block; position: absolute; top: 01px; left: 48px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #edeb2b; display: block; }
header nav #nav-account .cart span:hover { background: #f6f6f6; }

header nav .dropdown_1column { position: absolute; left: -999em; width: 980px; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 1px; }
header nav li:hover .dropdown_1column {left: auto; top: auto; }
header nav .dropdown_1column .mainbox { background: #edeb2b; border: 4px solid #000; }
header nav .dropdown_1column ul { width: 161px; float: left; letter-spacing: 0; height: 235px; border-right: 1px solid #d4d220; }
header nav .dropdown_1column ul.last { border: none; }
header nav #nav-site .dropdown_1column li { float: none; margin: 0; font-size: 12px; }
header nav #nav-site .dropdown_1column li.main-category { font-weight: 700; text-transform: uppercase; font-size: 13px; }
header nav .dropdown_1column a { display: block; padding: 5px 10px; }
header nav .dropdown_1column a:hover { background: #d4d220; }
header nav #nav-site .dropdown_1column .popular { padding: 10px; }
header nav .dropdown_1column .popular a { display: inline; padding: 0; }
header nav .dropdown_1column .popular a:hover { background: #d4d220; }
header nav .dropdown_1column li.main-category a:hover { background: none; color: #363636; }

header nav .dropdown_1column_right { position: absolute; left: -999em; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 1px; }
header nav .dropdown_1column_right span { position: absolute; right: 10px; padding: 0 4px; background: #d4d220; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
header nav li:hover .dropdown_1column_right {left: auto; right: -49px; top: auto; }
header nav .dropdown_1column_right ul {letter-spacing: 0; background: #edeb2b; border: 4px solid #000; width: 175px; }
header nav #nav-account .dropdown_1column_right li { float: none; margin: 0; }
header nav .dropdown_1column_right a { display: block; padding: 5px 10px; }
header nav .dropdown_1column_right a:hover { background: #d4d220; }
4

1 に答える 1

0

ホバーの代わりに、関数と関数にjQuery を使用しbind()てい ます。つまり、ドロップダウンを表示する責任が に変更されました。モバイル環境では、これは「ユーザーがナビゲーション項目に触れるとドップダウンが表示され、指を離すと消える」という意味になります。touchstarttouchend:hover.hover

UX を改善するための変更には、「クリック/タップして閉じる」などの変更が含まれる場合があります。

また、これがデスクトップ環境でも使用される場合は、正常にmouseenter動作しmouseleaveます。AFIK、Mobile Safari でも同様

jQueryが登場

$(function () {
    $('header nav li').bind({
        'touchstart': function () {
            $(this).addClass('hover')
        },
            'touchend': function () {
            $(this).removeClass('hover')
        }
    });
});

フィドル: http://jsfiddle.net/gvyKB/3/

于 2013-03-26T04:23:49.397 に答える