質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

ios(iphone,ipadなど)だけドロップダウンメニューの中身のaタグが機能しないです。。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 812

shio

score 26

いつも大変お世話になっております。

下記コードでドロップダウンメニューを動作させておりますが
ios(iphone,ipadなど)だけaタグが機能せずクリックしてもリンクしません。

どうかお助け下さいませ。

html

<nav class="g-navi-2" id="main-menu">
<ul class="clearfix">
<li class="lvl1"><a href="#">サンプルタイトル</a>
    <div class="lvl2" style="width: 215px;">
        <div class="lvl2-inner">
            <div class="col_1_small">
                <nav>
                    <ul>
                        <li><a href="sample.html" >サンプル</a></li>
                        <li><a href="sample.html" >サンプル</a></li>
                        <li><a href="sample.html" >サンプル</a></li>
                        <li><a href="sample.html" >サンプル</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</li>
<li class="lvl1"><a href="#">サンプルタイトル</a>
    <div class="lvl2" style="width: 215px; left: 22rem; border-right:1px solid #fff;">
        <div class="lvl2-inner">
            <div class="col_1_small">
                <nav>
                    <ul>
                        <li><a href="sample.html" >サンプル</a></li>
                        <li><a href="sample.html" >サンプル</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</li>
</ul>
</nav>

js(ソースコードに直書き)

<script type="text/javascript">
$(document).ready(function () {
  $('#main-menu').trevoMegaMenu({
    type: 'hover'
  });
});
</script> 

js

(function ($) {
  $.fn.trevoMegaMenu = function (options) {
    var defaults = {
      type: "hover",
      fadeIn: 200,
      fadeOut: 200
    };
    var options = $.extend(defaults, options);
    return this.each(function () {
      $(this).find("li.lvl1 a").each(function () {
        if ((options.type == "click") || ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))) {
          $(this).click(function () {
            subMenu = $(this).parent().find(".lvl2");
            if (subMenu.is(":visible")) {
              $(this).parent().find(".lvl2").fadeOut(options.fadeOut);
            } else {
              $(this).parent().find(".lvl2").fadeIn(options.fadeIn);
              if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
                $(this).parent().find(".lvl2").bind('touchstart click', function () {
                  $(this).fadeOut(options.fadeOut)
                })
              }
            }
          });
        } else {
          $(this).hover(function () {
            var lvl2Element = $(this).parent().find(".lvl2");
            if (lvl2Element[0]) {
              $(this).click(function () {
                return false
              })
            };
            lvl2Element.fadeIn(options.fadeIn);
            $(this).parent().find(".lvl2").hover(function () {
              clearTimeout(trvTimer);
            }, function () {
              var e = $(this);
              setTimeout(function () {
                if (!e.parent().children("a").ismouseover()) {
                  e.fadeOut(options.fadeOut);
                }
              }, 100);
            })
          }, function () {
            $(this).parent().children(".lvl2").each(function () {
              var e = $(this);
              trvTimer = setTimeout(function () {
                e.fadeOut(options.fadeOut);
              }, 100);
            })
          });
        }
      })
    });
  };
})(jQuery);
(function ($) {
  $.mlp = {
    x: 0,
    y: 0
  };

  function documentHandler() {
    var $current = this === document ? $(this) : $(this).contents();
    $current.mousemove(function (e) {
      jQuery.mlp = {
        x: e.pageX,
        y: e.pageY
      }
    });
    $current.find("iframe").load(documentHandler);
  }
  $(documentHandler);
  $.fn.ismouseover = function (overThis) {
    var result = false;
    this.eq(0).each(function () {
      var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
      var offset = $current.offset();
      result = offset.left <= $.mlp.x && offset.left + $current.outerWidth() > $.mlp.x && offset.top <= $.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
    });
    return result;
  };
})(jQuery);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る