0

この問題について考えたり見つけたりできる解決策が不足しています。私はページの上部に修正に取り組んでいます。左側にはアンカーがあり、ページの上部に移動すると、他の外部リンクが表示されます。右側はページ セクションのリストで、スクロールするためのアンカーが付いています。

ホバーとクリックは別々のイベントであるため、これはデスクトップではすべて正常に機能しますが、iPadでは同じです。iPad では、[商品リスト] リスト項目をタッチして、ドロップダウン メニューを表示できるはずです。もう一度タッチすると、トップに戻ります。今すぐタッチすると、トップに戻り、ホバーが表示されます。

コードと問題を再作成する jsfiddle を次に示します。http://jsfiddle.net/hyaTV/5/

HTML

<ul class="one">
<li><a class="intrapage" href="#stage">Product Title</a>
    <ul>
        <li><a href="other product">other product</a></li> <!-- link that goes to different page -->
        <li><a href="other product">other product</a></li> <!-- link that goes to different page -->
    </ul>
</li>
</ul>
<ul class="two">
    <li><a class="intrapage" href="#section_one">birds</a></li> <!-- goes to Birds section -->
    <li><a class="intrapage" href="#section_two">bees</a></li> <!-- goes to bees section -->
</ul>

CSS

ul.one{float:left;list-style:none;}
ul.one ul{display:none;}
ul.one > li:hover ul{display:block;}

/* styling for right side nav */
ul.two{float:right;list-style:none;}
ul.two li{display:inline-block;}

JS

// scrolls window to element id with easing
$(".intrapage").click(function(event) {
    event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 850);
return false;
});
4

2 に答える 2

0

iOS :hover issueを有利に使用できます。CSSを次のように変更すると信じています

ul.one > li ul { display: none; }
ul.one > li:hover ul { display: block; }

とはいえ、上記の問題は他のモバイル OS には存在しません。iOS でマウスアウトする方法はありません。

ユーザーがモバイル デバイスを使用しているかどうかを検出.mobileし、javascript を追加して、クリックイベント<body>でサブメニューを切り替えることをお勧めします。

CSS

ul.one > li:hover ul, ul.one > li.hover ul { display: block; }

JS

$('body.mobile ul.one > li').click(function(e) {
  $(this).toggleClass('hover');
});
于 2013-04-25T16:38:34.047 に答える