ドロップダウンメニューアンカータグhrefが動作しません

私はドロップダウンメニューを持っています。ドロップダウンメニューをクリックすると、hrefは機能しません。たとえば、「サブメニュー1」の項目をクリックすると、hrefは機能しません。この上の任意のアイデア..私を助けてください。ドロップダウンメニューアンカータグhrefが動作しません

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="UTF-8"> 
      <title>On click Menu</title> 
      <style> 

    #primary_nav_wrap { 
     margin-top: 15px 
    } 
    #primary_nav_wrap ul { 
     list-style: none; 
     position: relative; 
     float: left; 
     margin: 0; 
     padding: 0 
    } 
    #primary_nav_wrap ul a { 
     display: block; 
     color: #333; 
     text-decoration: none; 
     font-weight: 700; 
     font-size: 12px; 
     line-height: 32px; 
     padding: 0 15px; 
     font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif 
    } 
    #primary_nav_wrap ul li { 
     position: relative; 
     float: left; 
     margin: 0; 
     padding: 0 
    } 
    #primary_nav_wrap ul li.current-menu-item { 
     background: #ddd 
    } 
    #primary_nav_wrap ul li:hover { 
     background: #f6f6f6 
    } 
    #primary_nav_wrap ul ul { 
     display: none; 
     position: absolute; 
     top: 100%; 
     left: 0; 
     background: #fff; 
     padding: 0 
    } 
    #primary_nav_wrap ul ul li { 
     float: none; 
     width: 200px 
    } 
    #primary_nav_wrap ul ul a { 
     line-height: 120%; 
     padding: 10px 15px 
    } 
    #primary_nav_wrap ul ul ul { 
     top: 0; 
     left: 100% 
    } 
    #primary_nav_wrap ul li > a:focus + ul { 
     display: block 
    } 
      </style> 
     </head> 
     <body> 
      <h1>Testing menu</h1> 
     <div id="primary_nav_wrap"> 
      <ul> 

      <li 
     style=" 
      background-color: #007DB8; 

     "><a href="#">Menu 1</a> 
       <ul> 
       <li><a href="https://www.google.com">Sub Menu 1</a> 
       </li> 
       <li><a href="https://www.gmail.com">Sub Menu 2</a> 
       </li> 
       <li><a href="#">Sub Menu 3</a> 
       </li> 
       <li><a href="#">Sub Menu 4</a> 

        </li> 

       </ul> 
      </li> 
      <li style=" 
      background-color: #007DB8; 


     "><a href="#">Menu 2</a> 
       <ul> 
       <li><a href="#">Sub Menu 1</a> 
       </li> 
       <li><a href="#">Sub Menu 2</a> 
       </li> 
       <li><a href="#">Sub Menu 3</a> 
       </li> 
       </ul> 
      </li> 
      <li style=" 
      background-color: #007DB8; 

     "><a href="#">Menu 3</a> 
       <ul> 
       <li class="dir"><a href="#">Sub Menu 1</a> 
       </li> 
       <li class="dir"><a href="#">Sub Menu 2 </a> 

       </li> 
       <li><a href="#">Sub Menu 3</a> 
       </li> 
       <li><a href="#">Sub Menu 4</a> 
       </li> 
       <li><a href="#">Sub Menu 5</a> 
       </li> 
       </ul> 
      </li> 
      <li style=" 
      background-color: #007DB8; 

     "><a href="#">Menu 4</a> 
      <ul> 
       <li class="dir"><a href="#">Sub Menu 1</a> 
       </li> 
       <li class="dir"><a href="#">Sub Menu </a> 


        </ul> 
      </li> 

      </ul> 
     </div> 
     </body> 
    </html>

出典

2017-06-14 karthik

ここで起こっている問題は焦点の問題です。

「メニュー」をクリックすると、このメニューにフォーカスが当てられ、サブリストが表示されます。しかし、サブアイテムをクリックすると、元のメニューから基本的にぼかし（フォーカスが離れている）ので、サブリストはクリックが登録される前に消えます。

clickイベントの前にfocus/blurイベントがトリガーされるため、サブアイテムをクリックすることはできません。

出典

2017-06-14 12:31:43 Magador

ありがとうございます。これを解決する方法を教えてください。フォーカスの代わりに他のものを使うべきですか？私にお知らせください。またはコードを書き直す必要がありますか？ – karthik

ドロップダウンメニューアンカータグhrefが動作しません

答えて

関連する問題