javascript - 选择 LI 元素中的嵌套 div

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 的父级分区:

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

<强> Fiddle Demo