在LI元素中选择嵌套div

时间:2014-05-08 16:44:19

标签: javascript jquery html

我试图在点击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;
}

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

2 个答案:

答案 0 :(得分:3)

您需要在此使用.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

答案 1 :(得分: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();
});