hasClassがマウスのホバー上で動作していない

Question

こんにちは私はそのクラス "トグルナビ"に "ドロップダウン"が含まれているが、hasClassは機能していないことを発見しようとしています。

私のコードはここにある：

クラスのドロップダウンが子要素に存在し、要素を対象とならないためである

<li class="toggle-nav"> 
    <ul class="dropdown"> 
     <li><a href="#">Add User</a></li> 
     <li><a href="#>">User List</a></li> 
    </ul> 
</li> 
<li class="toggle-nav"> 
    <ul class="dropdown"> 
     <li><a href="#">Add Admin</a></li> 
     <li><a href="#>">Admin List</a></li> 
    </ul> 
</li> 
<li class="toggle-nav1"><a href="#">Setting</a></li> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $(".toggle-nav").hover(function() { 
      console.log($(this).hasClass("dropdown")); 
     }); 
    }); 
</script> 

Answer 1

。子要素のクラスを探す必要があります。返されるセットの長さが0より大きい場合は、クラスのドロップダウンと子要素が存在します。

$(".toggle-nav").hover(function() { 
    console.log($(this).find(".dropdown").length > 0); 
}); 

Answer 2

あなたが見つける使用する必要があります：

$(".toggle-nav").hover(function() { 
      console.log($(this).find(".dropdown").length); 
     }); 

をしてlengthが大きければ、あなたはif文で確認することができます0よりもクラスが存在する場合toggle-nav

Answer 3

$(this)は、ホバリングされた要素のみを指し、hasClassは$（this）のクラスの存在をチェックします。 チェックインの子要素に$(this).hasClass("dropdown")の代わりに$("ul",this).hasClass("dropdown")を使用する必要があります。

$(document).ready(function() { 
 
     $(".toggle-nav").hover(function() { 
 
      console.log($("ul",this).hasClass("dropdown")); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<ul> 
 
<li class="toggle-nav"> 
 
    <ul class="dropdown"> 
 
     <li><a href="#">Add User</a></li> 
 
     <li><a href="#>">User List</a></li> 
 
    </ul> 
 
</li> 
 
<li class="toggle-nav"> 
 
    <ul class="dropdown"> 
 
     <li><a href="#">Add Admin</a></li> 
 
     <li><a href="#>">Admin List</a></li> 
 
    </ul> 
 
</li> 
 
<li class="toggle-nav1"><a href="#">Setting</a></li> 
 
</ul>