Question

是否有一个简单的选择器表达式不能选择具有特定类的元素？

当悬停<li>时，我想要一个包含标记的悬停事件。

Js代码：

 $("sidebar-menu li:not(.header)").hover(function () {
    $('.sidebar-menu li a small').show();
}, function () {
    $('.sidebar-menu li a small').hide();
});

HTML code：

<ul class="sidebar-menu">
                <li class="header la-one">My Page</li><li><a href=""><i class="fa fa-circle-o text-info"></i> <span>Cook<small class="label pull-right bg-yellow" onclick="javascript:window.location.href='https://www.example.com/';" return="" false;'="">-</small></span></li>
    <li class="treeview">
        <a href="#">
            <i class="fa fa-folder"></i> <span>Other</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
        <li><i class="fa fa-circle-o"></i>Service<small class="label pull-right bg-green " onclick="javascript:window.location.href='https://www.exaple.com/'; return false;">+</small></li>
        <li><i class="fa fa-circle-o"></i>Enroll<small class="label pull-right bg-green " onclick="javascript:window.location.href='https://www.exaple.tw/'; return false;">+</small></li>

        <li><a href=""><i class="fa fa-circle-o"></i>Portal Ask<small class="label pull-right bg-green " onclick="javascript:window.location.href='https://www.exaple.tw/'; return false;">+</small></a></li>
        </ul>
     </li></ul>

UPDATE 当我悬停$("sidebar-menu li:not(.'header')")和$("sidebar-menu li:not(.header)")时，<li class="treeview">到<li class="header la-one">仍会触发事件。

如何设置li具有标签而不是其他标签的选择器？ THX〜

Answer 1

onclick行有语法错误，你可以注意到它是here的红色

<li class="header la-one">My Page</li><li><a href=""> Cook

正如我在评论中指出的那样

$(".sidebar-menu li:not(.header)")

在.课程之前添加sidebar-menu，而不是使用此类:not(.header)

我建议您阅读有关选择器Here

的信息

Working demo

您也可以使用:has(small)

$(".sidebar-menu li:has(small)")

Answer 2

抬起头来！

错误在于：$(".sidebar-menu li:not(.'header')")（标题选择器周围的单引号）。

您应该只使用$(".sidebar-menu li:not(.header)")（在标题选择器周围没有任何引号，就像帖子下面的评论中指出的那样）。

根据您的更新，您需要：

$('.sidebar-menu').find('li:not(.header)').hover(function(){
    console.log('hovered');
    // run your function here (example: $('.sidebar-menu li a small').show();)
});

Answer 3

要选择具有特定子元素的元素：可以使用http://api.jquery.com/has-selector/＆amp;中给出的选择器。：不选择没有课程的元素。

$('li:has(span)').hover(function(){
    // Your hover function
}

如何在嵌套列表中选择<li>

3 个答案: