0

私はまだモバイル/流動的/レスポンシブゲームに不慣れで、このサイトのサブメニューに問題があります：http ://www.medowsconstruction.com/

モバイルをクリックすると、：hover関数が自動的に置き換えられますよね？標準のFoundationテーマの場合のようです。

フレームワークのこれらのモバイル固有の領域では何も変更していなかったので、それを台無しにしてサブメニューをiPad / touchに表示しないようにするにはどうすればよいですか？

助けてくれてありがとう

4

2 に答える 2

1

問題は、これが標準の純粋なCSSドロップダウンメニューではないことです。代わりに、jQueryによって制御されています。app.jsファイルで確認できます。

$('.nav-bar>li.has-flyout').hover(function() {
      $(this).children('.flyout').show();
    }, function() {
      $(this).children('.flyout').hide();
    });

したがって、選択したデバイスでタッチ操作を行うには、スクリプトを変更する必要があります（このトピックについては、ここで適切な説明があります）。ここでは、簡単なステートメントを使用しています。私はiPadでそれをテストすることができませんでしたが、（テストされていない！）のようなものを使おうとすると良い結果が得られる可能性があります：

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.nav-bar>li.has-flyout').bind('touch', function() {
      $(this).children('.flyout').slideToggle();
    });
} else {

$('.nav-bar>li.has-flyout').hover(function() {
          $(this).children('.flyout').show();
        }, function() {
          $(this).children('.flyout').hide();
        });
}

これはあなたにそれに対処する方法についてのいくつかの手がかりを与えるはずです。動作するかどうかお知らせください。

このスタックオーバーフローの説明には、ホバーデバイスとタッチデバイスに関する多くの情報もあります。

于 2012-10-25T00:23:02.250 に答える
0

物事を正しい方向に導いてくれた@hernanに感謝します。

私は、Foundationコードと彼のコードをいくつかのより良いセレクターと混合することによってそれを修正することになりました。これが私が着陸したものです：

if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) {
    $('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) {
        e.preventDefault();
        var flyout = $(this).children('.flyout').first();
        if (lockNavBar === false) {
            $('.nav-bar .flyout').not(flyout).slideUp(500);
                flyout.slideToggle(500, function(){
                lockNavBar = false;
            });
        }
        else
        {
            flyout.slideToggle(500);
        }
    });

私は間違いなくあなたが言及したこれらの2つのリンク/ディスカッションもチェックしています、ヘルナン。

再度、感謝します-

于 2012-10-25T13:45:13.083 に答える