jqueryのelse文と.hover（）メソッドの使用

Question

私はモーダルのように機能するようにしたドロップダウンメニューがあります。

<div class="hidden-dropdown hide"> 
    <ul> 
     <li><a>Blah</a></li> 
     <li><a>Blah balh</a></li> 
     <li><a>Blah</a></li> 
    </ul> 
</div> 

と私はdivのか、ドロップダウンメニューが表示され、選択することができるようにIDを持っているのナビゲーションバーのリンクにカーソルを合わせるとするためのいくつかのjQueryの

。

のjQuery：

$(document).ready(function() { 
    if ($("#kDropdown") || $(".hidden-dropdown").hover == true) { 
     $("#kDropdown").hover(function() { 
       $(".hidden-dropdown").removeClass("hide"); 
     }); 
    } else { 
     $(".hidden-dropdown").addClass("hide"); 
    }// end if 
}); // document is ready 

コードは「隠す」クラスを除去することにより、遊びにドロップダウンメニューをもたらすために正常に動作しますが、それは視界からそれを削除するには動作しません。

機能を動作させるにはどうすればよいですか？必要なのは、ナビゲーションバー "#kDropdwon"の上にカーソルを置いたときに表示されるドロップダウンと、ナビゲーションバーまたは "hidden-dropdown" divの上にホバリングしていないときに削除することだけです。

編集：追加navar

<ul class="action-bar__menu--main action-bar__menu list--inline action-bar--show" id="SiteNav" role="navigation"> 
    <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}"> 
     <a href="{% if template == 'index' or template == 'page.index' %}#{% else %}https://domeha.com{% endif %}" class="action-bar__link">Home</a> 
    </li> 
    <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}"> 
     <a href="{% if template == 'collection' %}#{% else %}/collections/all{% endif %}" id="kDropdown" class="action-bar__link">Products</a> 
    </li> 

のsnippitは、ありがとうございます！

Answer 1

最も簡単な解決策は次のようになりますので、ホバーはだけでなく、ハンドラ内でパラメータをハンドラを取り出すことができる：

$(document).ready(function() { 
    // question about kDropdown, where is this since it isn't in the code snippet? 
    $('#kDropdown').hover(
    function() { $(".hidden-dropdown").removeClass("hide"); }, 
    function() { $(".hidden-dropdown").addClass("hide"); } 
); 
}) 

Answer 2

divにはidを持っていないので、代わりにクラス.hidden-dropdownを使用する必要があります。

$("#hidden-dropdown").addClass("hide"); 
___^ 

は次のようになります。

$(".hidden-dropdown").addClass("hide"); 
___^ 

この情報がお役に立てば幸いです。

$(document).ready(function() { 
 
    $("li").hover(
 
    function() { 
 
     $(".hidden-dropdown").removeClass("hide"); 
 
    }, function() { 
 
     $(".hidden-dropdown").addClass("hide"); 
 
    } 
 
); 
 
}); // document is ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 

 
<ul class="action-bar__menu--main action-bar__menu list--inline action-bar--show" id="SiteNav" role="navigation"> 
 
    <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}"> 
 
    <a href="{% if template == 'index' or template == 'page.index' %}#{% else %}https://domeha.com{% endif %}" class="action-bar__link">Home</a> 
 
    </li> 
 
    <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}"> 
 
    <a href="{% if template == 'collection' %}#{% else %}/collections/all{% endif %}" id="kDropdown" class="action-bar__link">Products</a> 
 
    </li> 
 
</ul> 
 

 
<div class="hidden-dropdown hide"> 
 
    <ul> 
 
     <li><a>Blah</a></li> 
 
     <li><a>Blah balh</a></li> 
 
     <li><a>Blah</a></li> 
 
    </ul> 
 
</div>