1

いくつかの CSS3 トランジションでドロップ ダウン ナビゲーション メニューを作成しようとしています。ただし、非表示/可視を使用する場合、iOS はドロップダウンを表示しません (リンクに移動するだけです)。表示なし/ブロックを使用すると、iOS は親要素の最初のクリックでドロップダウン メニューを表示しますが、遷移はどのブラウザーでも機能しません。

これらのトランジションをブラウザーで正しく機能させ、ドロップダウンを iOS で JavaScript を使用せずに機能させる方法はありますか?

ドロップダウンは iOS では機能しません:

nav ul li ul {
    position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }

トランジションはブラウザーでは機能しません:

nav ul li ul {
    position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }
4

2 に答える 2

2

これについてもう少し考えた後、私は以前に見たことのないドキュメントを見つけました-あなたが経験している奇妙なことのいくつかは、デフォルトではインタラクティブではないもの（アンカーのみ）の疑似要素に動作をアタッチしているためかもしれませんおよびフォーム要素はクリック可能です）。

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

（event.preventDefaultに関する私の元のコメントを無視してください...アンカーの代わりにリストアイテムを操作していたことを忘れました。）

ただし、あらゆる種類の要素に関連付けられたイベントについて非常に具体的にすることができるため、JSが最善のアプローチであると私は思います。CSSクラスを適用するだけで、すでに指定した遷移プロパティが使用されます。

このような：

// CSS
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; }

// JS
// you could bind mouseover/out here too if you want it to work on both desktop & mobile
$('nav ul li').bind('click', function(){
    $(this).children('ul').toggleClass('visible');
});

さらに素晴らしいものにしたい場合はtabIndex="0"、リスト項目に追加することでキーボードにアクセスできるようにすることができます:)

于 2012-04-18T23:51:02.333 に答える
0

私はこれに対する解決策を見つけました。基本的に、iosは、display：block / noneまたはvisibility：hidden/visibleであるもののクリックをホバーにバインドしません。したがって、不透明度をサポートしない<= ie8を補正するには、「左」を使用してドロップダウンを「非表示」にする必要があります。

したがって、基本的に2番目の例を少し調整して使用します。

nav ul li ul {
    position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99;
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;}

次に、トランジションで「all」を使用しないように注意してください。使用しないと、左の属性もアニメーション化されます:)このメソッドの唯一の問題は、トランジションが途中でのみ機能し、途中でのみ機能することです。

于 2012-04-25T04:22:46.797 に答える