2016-11-14 27 views
1

多くのドロップダウンメニューがあるページがあります。これは、cssを使用してホバーイベントで表示されます。しかし、私はまた、タブを押して、jqueryを使ってフォーカスしているときにそれらを表示させたい。私はこの試みた:jqueryで要素が表示されたときにフォーカスの視認性が失われる

をし、次の処理が行われます。

$("body").keydown(function(e) { 
     var keyCode = e.keyCode || e.which; 
     if (keyCode === 9) { 

      $("*").bind("focus",function(){ 
      var $self = $(this); 

       if($self.siblings("*:hidden").length > 0){ 
        hidden_menu = $self.next("*:hidden"); 
        if($(hidden_menu).is("ul")){ 
         $(hidden_menu).show(); 
         $(hidden_menu).children().addClass("shownhidden");       
        } 
       } 
       $("*").unbind("focus");    
      }) 
     } 
     $("*").focusout(function(){   
      if(!$(this).next().is(".shownhidden") && $(this).is(".shownhidden")){ 
       setTimeout(function(){ 
        $(hidden_menu).hide(); 
       },1000) 
      } 
     }); 
}); 
  1. I各ボタンの上にマウスダウンメニュー対応するドロップは、その後
  2. 表示されているとき、私はタブを押すと、各ボタンになったとき対応するメニューが表示されます。
  3. しかし、その後、ボタン上にマウスを置くと、対応するメニューが表示されません。

htmlコードは以下のように多くの要素で構成されています

  <li id="navMenuButton" class="dropdown"> 
       <button class="dropbtn">Menu</button> 
       <ul class="dropdown-content"> 
       <li><a href="#">Menu 1</a></li> 
       <li><a href="#">Menu 2</a></li> 
       <li><a href="#">Menu 3</a></li> 
       </ul> 
      </li> 

この部分のCSSコードは次のとおりです。

.dropbtn { 
    background-color: #9AEDF3; 
    padding: 14px; 
    border: none; 
    cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

/* Change the background color of the dropdown button when the dropdown content is shown */ 
.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

問題は何ですか?

+0

CSSと使用しているHTMLを投稿できますか? – DaFois

+0

上記のCSSとhtmlコードが含まれています – themis93

答えて

0

あなたのJQuery関数は、あなたが期待していないものを隠しているようです。その結果、メニューブロックを表示しようとすると何も表示されません。

迅速かつ簡単なテストが...これが動作する場合に読み、その後、この

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content, .dropdown:hover li, .dropdown:hover a { 
    display: block; 
} 

にこの

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

からあなたのCSSファイルでこれを変更することであろう

コードから、.dropdown-contentクラス(これはulでもあります)を介してのみ可視性を制御しようとしているようですタグ)。

私はあなたのjQueryのクラスは(最も可能性が高い要素)UL要素を隠すだけでなく、そのタグ内の要素のいくつかされていないだけと考えています。あなたのCSSはそれを考慮しないので、再び表示されません。

ここでは、表示されたクラスをul要素の子に割り当てます。 (Q:?あなたはhidden_​​menuクラス自体に割り当てる意味した)

$(hidden_menu).show(); 
$(hidden_menu).children().addClass("shownhidden"); 

要素はまた、(親経由)隠されているので、このコードは、彼らのために一致しても、(彼らがどの要素を持っています兄弟テストに合格する)。したがって、l要素をhidden_​​menuに割り当てることができました。

$("*").bind("focus",function(){ 
var $self = $(this); 
if($self.siblings("*:hidden").length > 0) { 
    hidden_menu = $self.next("*:hidden"); 
    ... 
} 

このコードは、望ましくない要素を隠します。

$("*").focusout(function(){ 
    if(!$(this).next().is(".shownhidden") && $(this).is(".shownhidden")){ 
     setTimeout(function(){ 
     $(hidden_menu).hide(); 

これは問題はその後することができます、(この記事の最初に与えられた簡単なテスト)である場合には、次のいずれか
は、a))は
Bをhidden_​​menu割り当てる前に、クラスタイプをチェックし使用する前に、クラスタイプをチェックhidden_​​menu(特に非表示にする前に)
c)上記のCSSブロックを追加して、羽の要素の下にあるすべての要素を表示します。

+0

あなたのエリート回答に感謝します。しかし、私は問題を解決しませんでした。主な理由は、jqueryを使用してタブが押されたときに要素(ドロップダウンメニュー)を非表示にしてから、ボタンにカーソルを置いたときにこの要素を表示させることができないことです。 – themis93

+0

こんにちは、Chrome(または他のブラウザ)開発ツールの隠し要素の状態を調べようとしましたか?要素全体とそれに対応する階層全体のCSSを見ると、何が起こっているのかを知ることができます。 – TDWebDev

関連する問題