addclass未成功实施

Question

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

}）;

Jquery的执行完这条→

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

应该成为这一→

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

但这没有发生。

Source of my Learning.

Answer 1

1. 选择是错误的。 .slash-menu nav表示具有类slash-menu的元素查找子导航。基于HTML标记应与类slash-menu
2. 使用这种上下文元素导航

$(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

那是因为你的选择是寻找内部.slash-menu一个<nav>元素 - 目标是这样的：

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