2

解決できないように見える問題を見つけました。

ナビゲーション、合計 5 つのリンクがあります。リンクの 1 つにカーソルを合わせるとドロップダウン メニューが表示され、さらに 3 つのリンクが表示されます。

マウスが関係している場合は問題ありません。しかし、タッチ デバイスの使用を開始すると、親リンクはすべてのジェスチャとタップを消費し、視聴者には、親のリンク ページに移動する前に数分の 1 秒間ドロップダウンが表示されます。

親リンクの最初のタッチでドロップダウンメニューが表示され、2回目のタッチでそのリンクに移動するようにする方法があるかどうか疑問に思っています。他の何かに触れると、ドロップダウンが非表示になります。

<ul id="main-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a>
        <ul class="sub-menu">
           <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

誰にもアイデアはありますか？jQueryが理想的です

4

2 に答える 2

1

もしかしてこういうこと？ドロップダウンの動作をカスタマイズしたい場合がありますが、これは、メニューが開いていない場合にクリック イベントを処理し、デフォルトの動作 (つまり、リンクをたどる) を防止する基本的なロジックを示しています。

$(function() {
    $('#main-menu a').click(function(e) {
        var listItem = $(this).closest('li');
        if (!listItem.is('.open')) {
            // Opening drop-down logic here. e.g. adding 'open' class to <li>
            e.preventDefault();
            listItem.addClass('open');
        }
        // Otherwise the default behaviour of the event (clicking the link) will be unaffected
    });
});
于 2012-09-17T09:55:54.810 に答える
0

上記の問題の完全なビンを作成し、ここにデモ リンクを配置しました。

デモ: http://codebins.com/bin/4ldqp72

HTML

<ul id="main-menu">
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
    <ul class="sub-menu">
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
      <li>
        <a href="#">
          Sub Link
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
  <li>
    <a href="#">
      Link
    </a>
  </li>
</ul>

JQuery

$(function() {
    $('ul a').click(function(e) {
        $('#main-menu li').removeClass('open');
        e.preventDefault();
        $(this).closest('li').addClass("open");
        var pos = $(this).closest('li.open').offset();
        $(this).closest('li.open').find("ul.sub-menu").css('top', pos.top + 'px');

    });
});

CSS

#main-menu{
  list-style:none;
  margin:2px;
  padding:2px;
}
li{
  border:1px solid #333;
  background:#ebcdff;
  text-align:center;
  width:100px;
}
li:hover{
  background:#abcdfd;
}
li:hover a{
  color:#ff3322;
}
li a{
  text-decoration:none;
  color:#2466ff;

}
li.open {
  background:#abcdfd;

}
li.open a{
  text-decoration:none;
  color:#ff3322;

}
ul.sub-menu{
  list-style:none;
  display:none;
}
li.open > ul{
  position:absolute;
  left:70px;
  display:block;
}

デモ: http://codebins.com/bin/4ldqp72

于 2012-09-17T12:36:04.963 に答える