addclass not successfully implementing

Question

$(document).ready(function() {
  $('.slash-menu nav').click(function(){
       $('.slash-menu nav').addClass('active');
  });

});

After the Jquery is executed this →

<nav class="slash-menu"></nav>

should become this →

<nav class="slash-menu active"></nav>

But this is not happening.

Source of my Learning.

Answer 1

1. selector is wrong. .slash-menu nav means element with class slash-menu find child nav. based on html mark up should be element nav with class slash-menu
2. use this context

$(document).ready(function() {
  $('nav.slash-menu').click(function() {
    $(this).toggleClass('active');
  });
});

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="slash-menu">red</nav>
<nav >not red</nav>

Answer 2

it's because your selector is looking for a <nav> element inside .slash-menu - target like this:

$('nav.slash-menu').click(function()
{
    $(this).addClass('active')
})