Question

您好我正在尝试找到该课程＆＃34; toggle-nav＆＃34;包含＆＃34;下拉＆＃34;或不，但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

这是因为class元素下拉列表中存在类下拉列表，而不是目标元素。你需要在子元素中寻找类。如果返回集的长度大于0，则存在具有类下拉列表的子元素：

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

Answer 2

您需要使用find：

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

然后您可以使用if语句检查length是否大于0 toggle-nav

中的类

Answer 3

$(this)指向只有悬停的元素，而hasClass检查$（this）上类的存在。因此，您必须使用$("ul",this).hasClass("dropdown")代替$(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>

hasClass不支持鼠标悬停

3 个答案: