CODEWITHSUNDEEP
javascriptjquerydom
opportunityr
opportunityr

Reputation: 183

jQuery: Only affect elements with a certain class that are children of another element

I have a jQuery function that toggles a drop-down navigation menu by changing its class on click:

$(function () {
     $('.nav-titles').on('click', function() {
        $('.nav-dropdown').toggleClass('nav-dropped-down');
     });
});
<nav>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
</nav>

The problem is that it changes the class of all drop-down menus instead of just the one whose button was clicked. Can I do anything so it only changes the .nav-dropdown that is directly under its .nav-titles button?

Added the HTML structure as requested.

Upvotes: 0

Views: 99

Answers (2)

Mehdi Bouzidi
Mehdi Bouzidi

Reputation: 1985

The thing is that you can't click on the nav-titles class because it wrapped by its li parent, so you must select the li tag for the click & not the nav-titles class, then search for the nav-dropdown class inside of it.

$(function () {
     $('.nav-titles').on('click', function() {
        $(this).closest('.nav-dropdown').toggleClass('nav-dropped-down');
     });
});


$('li').on('click', function() {

      $(this).find('.nav-dropdown').toggleClass('nav-dropped-down');
});
.nav-dropped-down
{
height:20px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
	<li>
		<a class="nav-titles"></a>
		<div class="nav-dropdown"></div>
	</li>
</nav>

Upvotes: 0

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18399

You need to find parent li element, and look for the dropdown class on it:

$('.nav-titles').on('click', function() {
    $(this).closest('li').find('.nav-dropdown').toggleClass('nav-dropped-down');
});

Upvotes: 1

Related Questions