hasClass無法在鼠標懸停上工作

您好，我正在嘗試查找類「toggle-nav」是否包含「dropdown」，但hasClass無法正常工作。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>

來源

2016-09-28 Akanksha Maurya

請花時間來讓你的代碼人類可讀您發佈之前。當你做這件事時，你更有可能得到快速和準確的幫助 –

我希望控制檯在你的例子中顯示'false'。那不是你所看到的嗎？ –

這是因爲類下拉列表中的子元素存在，並沒有針對性的元素。你需要在子元素中尋找類。如果返回集的長度大於0時，帶班下拉子元素存在：

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

來源

2016-09-28 13:48:43

謝謝，它有效（Y）。 –

您可能需要使用發現：

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

，然後你可以用if語句如果length大檢查（0）類內存在toggle-nav

來源

2016-09-28 13:49:06

'size（）'在1.8中贊成使用'.length'屬性 – Satpal

find（「dropdown」）！= find（「。dropdown」） –

@Satpal那麼推薦的是什麼？ –

$(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>

來源

2016-09-28 13:55:59

hasClass無法在鼠標懸停上工作

回答

相關問題