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') 
})