4

タッチ ベースのデバイスでドロップダウン メニューが正しく動作するようにしようとしています。クリックするとメニューが正常に開きますが、親要素もリンクであるため、ドロップダウン項目が選択される前にユーザーがリンクに移動します。

（タッチデバイスのみ）親要素の最初のタップでドロップダウンが開き、2回目のクリックでリンクが表示されるようにする方法はありますか?

私は HTML と CSS について十分な知識を持っていますが、JavaScript については詳しくありません。そのため、ソリューションがスクリプト ベースである場合は、できるだけ詳しく説明してください。

ありがとう

4

5 に答える 5

0 
function createMenu(menuName,menuTitle,menuEntries,left,width) {

 numEntries = menuEntries.length;

document.write('<div class="menuTitle" style="left:0px; width:100px;"');
document.write('onMouseover="menuToggle(\'' + menuName + '\');"');
document.write('onMouseout="menuToggle(\'' + menuName + '\');">');
document.write(menuTitle);
document.write('</div>');

     document.write('<div id="myMenu" class="menu" style="left:0px; width:100px;"');
     document.write('onMouseout="menuToggle(\'' + menuName + '\')">');
     for (i = 0; i < numEntries; i++) {
        document.write('<a href="' + menuEntries[i].url + '" class="menuEntry">' + menuEntries[i].entry + '</a><br>');
     }
     document.write('</div>');

}

  function menuToggle(target) {

     targetMenu = (document.getElementById) ? document.getElementById(target).style : eval("document." + target);
     targetMenu.top = (parseInt(targetMenu.top) == 22) ? -2000 : 22;

     }
  // -->
  </script>

これは、マウスが上に置かれたときにドロップダウン メニューを作成するための JavaScript です。これは、Arman Danesh によるJavaScript in 10 Simple Steps or Lessという本からのものです。彼は偉大な作家であり、おそらく私よりもずっとうまく説明してくれるでしょう。

あなたがやっていることは、() で宣言された定義済みの変数を持つ関数を作成することです。行numEntries...は、変数 numEntries の値を事前定義された変数 menuEntries の長さとして設定します。つまり、(この例では、プログラムされるエントリの数は 3 で、numEntries = 3 になります) ただし、コーディングするエントリの数は numEntries の値です。

document.write の内容は紛らわしく見えるかもしれませんが、HTML コードを保持するのは単なる JavaScript コードです。div を単独で配置すると、これを script タグに配置しているため、プログラムが壊れてしまうからです。わからないことがあればいつでも聞いてください。後で教科書を持ってきたら、教科書の内容を教えます。

これが最初に処理される関数で、2 番目はマウス ホバーのメニュー ドロップダウンを作成する関数です。この本を引用せずにこれを明確に説明する方法はわかりませんが、説明が必要な場合は試してみます. メニューを表示するための HTML コードも必要な場合は、例全体を示すことができます。私のコンピューターにはあります。

これがお役に立てば幸いです。何か確認する必要があるかどうかお尋ねください。タッチスクリーン用に変更する方法を研究し続けますx

于 2012-10-26T10:53:53.380 に答える
0

これが役立つ場合があります。リンクがあれば

<a href="#">your drop down menu</a>つまり追加#するhref

または、JavaScriptでこれを行います

var link = $('.menu').find('a');

$(document).on('touchstart', link, function (e) {
    e.preventDefault();
    //do your stuff
});
于 2012-10-26T10:28:38.000 に答える