jquery - 仅影响父 LI

Question

我正在制作一个带有子菜单的菜单，该子菜单的行高

不断变化

但是我不能阻止这个行高影响我的 child (子菜单)li，

我试过 ul.nav > li 但它仍然影响下方的菜单栏..

$(window).on("scroll resize load", function () {
    if($(window).width() > 863) {
        wide();

        if ($(window).scrollTop() > 75) headerLow();
        else headerHigh();
    } else {
        headerLow();
        thin();
    }
});

var headerHigh = function () {
    $('#head').removeClass('mini').css('height', '75' );
};

var headerLow = function () {
    $('#head').addClass('mini').css('height', '60' );
};

var thin = function() {
    $('#slider').css({ 'padding-top' : '60px'});
};

var wide = function() {
    $('#slider').css( 'padding-top' , '78px');
};

---

<div id="head">
    <div class="container">
        <ul class="nav pull-right">
            <li><a href="#"></a>
                <ul>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</div>

---

.nav li { line-height: 80px;transition: line-height 0.5s ease; }  
.nav li > ul li { line-height: 10px; }
.mini ul.nav > li, .mini .logo { line-height: 60px; }
.mini h1 { font-size: 2em; }

问题是当我向下滚动时，第二个菜单受 .mini 影响。 Live demo .

Answer 1

使用 li:nth-child(3) { line-height: 60px; }

注意:这会影响内层而不是子层。

阅读this了解 nth-child 的工作原理。

或

给你的 li 一个类并使用那个类应用 CSS。

<ul>
    <li class="menuLI">Menu</li>
    <li class="menuLI">About Us</li>
    <li class="menuLI">Contact Us
        <ul>
            <li class="subMenuLI">Starters</li>
            <li class="subMenuLI">Breakfast and Brunch</li>
        </ul>
    </li>
</ul>

这是更新的 JSFiddle Link

注意:这是我更新的内容。

.nav li > ul li{ line-height: 40px; } // Updated
.nav li ul { line-height: 0px; } // Added