Question

有一个愚蠢的问题，只是想在它的子菜单可见时添加一个类。它是级联并将类添加到所有li a，甚至是子菜单中的一个。

<ul id="nav">
    <li><a href="#" target="_self">HOME</a></li>
    <li class="dropdown"><a href="#" target="_self">SYSTEM MANAGER<span aria-hidden="true" data-icon="&#xe000;"></span></a>
        <ul>
             <li><a href="#" target="_blank">Link 1</a></li>
        </ul>
    </li>
</ul>

JS

$('li.dropdown').on('mouseenter mouseleave', function(e){
        e.preventDefault();
        if (e.type === 'mouseenter')
            $(this).addClass('hilight');
        else
            $(this).removeClass('hilight');
    });

CSS

body header #headerContain nav#nav-wrap ul#nav li.dropdown.hilight a {
  color: #db4105;
}

我如何才能将它仅应用于父li.dropdown a而不是让它级联到孩子们？

Answer 1

您应该使用child-selector，只需更改您的CSS，

body header #headerContain nav#nav-wrap ul#nav li.dropdown.hilight > a {
  color: #db4105;
}

当下拉可见时，将类添加到父li a

1 个答案: