Question

我试图在点击LI时使用jQuery选择LI元素中包含的div，这是我目前为止的代码。

jQuery( ".about-nav-item" ).click(function() {
    jQuery(this).next('.white-content').show();
});

HTML

<nav id="about-nav">
    <ul>
        <li class="about-nav-item">
            <a href="#">Story</a>

            <div class="white-content">TEST</div>

        </li>
        <li class="about-nav-item">
            <a href="#">Approach</a>

            <div class="white-content">TEST1</div>

        </li>
        <li class="about-nav-item">
            <a href="#">Team</a>
        </li>
        <li class="about-nav-item">
            <a href="#">Network</a>
        </li>
    </ul>
</nav>

CSS：

.white-content {
    width: 220%;
    float: left;
    margin-left: 95%;
    top: -20px;
    position: absolute;
    background: white;
    min-height: 350px;
    color: black;
    display: none;
}

问题在于点击元素时，它什么都不做，并且没有显示元素。

Answer 1

您需要在此使用.children()或.find()，因为.about-nav-item是.white-content div的父级：

jQuery( ".about-nav-item" ).click(function() {
    jQuery(this).find('.white-content').show(); // or jQuery(this).children('.white-content').show();
});

<强> Fiddle Demo

Answer 2

您可以使用find()执行此操作：

jQuery(".about-nav-item").click(function() {
    jQuery(this).find('.white-content').show();
});

或上下文选择器：

jQuery(".about-nav-item").click(function() {
    jQuery('.white-content', this).show();
});

在LI元素中选择嵌套div

2 个答案: