メニュー以外のものをクリックするとドロップダウンメニューが消える

私はこのサイトを初めて利用しています。私は、GoogleとFacebookに表示されるようにドロップダウンメニューを作るのにjavascriptが使えるように、ほぼ6日間はGoogleで検索しました。 FBはアカウントリンクでそれを使用します。 Facebookのアカウントをクリックすると、ドロップダウンメニューが表示されます。メニュー以外のものをクリックするとドロップダウンメニューが消える

これは私が欲しいものです：私たちは、ページ上の他の場所をクリックすると

、それは消えたが、まだ私たちは、例えば、このメニュー自体をクリックしたときに表示されます私たちはページからログアウトすることができますが、他の場所をクリックすると、一部のonblurイベントが発生したように消えます。私は、次のようなコードを書いた

：

上記のコードで

<html> 
    <head> 
     <title>Untitled Document</title> 
     <script type="text/javascript"> 
      function dropdown() { 
      var ele = document.getElementById("hide"); 
      if(ele.style.display == "block") { 
       ele.style.display = "none"; 
      } else { 
      ele.style.display = "block"; 
      } 
      } 
     </script> 
    </head> 
    <body> 
     <a href="#" onClick="dropdown()">Hello Mohd</a> 
     <div id="hide" style="display:none"> 
      <p>Hii All<p></p>Hw r u</p> 
      <p><a href="#">Sign Out</a></p> 
     </div> 
    </body> 
</html>

私はリンクをクリックしたときに、それがうまく動作します。ドロップダウンメニューがすべての詳細と共に表示され、再度クリックすると消えます。ページ上の他の場所をクリックすると消えてしまいます。私はできません。

onblurを使用すると、ドロップダウンメニューがクリックされても消えます。 e。私はそれを使用することはできません。ここで

出典

2011-07-18 Muddser

ドキュメントにクリックイベントを結合しようとしたことがありますか？ – tjameson

あなたが行く：

http://jsfiddle.net/Paulpro/vty5s/

コード：

<html> 
    <head> 
     <title>Javascript Dropdown Example</title> 
     <style type="text/css"> 
      #hide{ 
       display: none; 
       background-color: #68D; 
       border: 1px solid #000; 
       width: 80px; 
      } 
     </style> 
     <script type="text/javascript"> 
      function showDropDown(e){ 
       document.getElementById('test').onclick = function(){}; 
       if(e.stopPropagation) 
       e.stopPropagation(); // W3C model 
       else 
       e.cancelBubble = true; // IE model 

       document.getElementById("hide").style.display = "block"; 
       document.onclick = function(e){ 
       var ele = document.elementFromPoint(e.clientX, e.clientY); 
       if(ele == document.getElementById("test")){ 
        hideDropDown(); 
        return; 
       } 
       do{ 
        if(ele == document.getElementById("hide")) 
        return; 
       }while(ele = ele.parentNode); 
       hideDropDown(); 
       }; 
      } 

      function hideDropDown(){ 
       document.onclick = function(){}; 
       document.getElementById("hide").style.display = "none"; 
       document.getElementById('test').onclick = showDropDown; 
      } 
     </script> 
    </head> 
    <body> 
     <a href="#" id="test">Hello Mohd</a> 

     <div id="hide"> 
      <p>Hii All<p></p>Hw r u</p> 
      <p><a href="#">Sign Out</a></p> 
     </div> 

    </body> 
    <script type="text/javascript"> 
     document.getElementById('test').onclick = showDropDown; 
    </script> 
</html>

出典

2011-07-18 06:37:32 Paulpro

hey PaulPro！ウルの助けをありがとう。それはまさに私が望む通りです。仕事に感謝します。しかし...私は私のページでそれが動作しない場合、私は何が起こっているのかわからないが、まったく動作しません...私はすべてのものをコピー＆すべての希望の場所に貼り付けて私のページ（すなわち、タグのタグのCSS、スタイルタグなどのCSS）。でも、Hello Mohdリンクをクリックしても何も起こりません... plzは何かをして、なぜ私のページでうまくいかないのか教えてください...すぐに返信してください...事前に感謝... – Muddser

こんにちは@Muddser。この問題はjavascriptのこの行である可能性があります： 'document.getElementById（ 'test'）。onclick = showDropDown;'。 'test'要素はまだ存在しないので、headタグでは動作しません。 ''タグの直後にある別の '

メニュー以外のものをクリックするとドロップダウンメニューが消える

答えて

関連する問題