问题描述:

I am trying to select the div contained within the LI element using jQuery when the LI is clicked, here's the code I have so far.

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>

The CSS:

.white-content {

width: 220%;

float: left;

margin-left: 95%;

top: -20px;

position: absolute;

background: white;

min-height: 350px;

color: black;

display: none;

}

The problem is that on clicking the element, it simply does nothing and doesn't show the element.

网友答案:

You need to use .children() or .find() here since .about-nav-item is the parent of .white-content div:

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

Fiddle Demo

网友答案:

You can use find() to do this:

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

Or a contextual selector:

jQuery(".about-nav-item").click(function() {
    jQuery('.white-content', this).show();
});
相关阅读:
Top