將類添加到一個元素而不是所有元素，例如

Question

所以，我在這裏掙扎。我想要點擊一下，甚至當我點擊導航時，它會打開嵌套列表並向父列表中添加類。 這部分幾乎可行，問題是它將該類添加到父列表中的所有元素。

 <ul> 
     <li><div><p class="hidden">Test 1</p> 
      <ul class="shown"> 
       <li> 
        <a href="#"><p>Inner 1</p></a> 
       </li> 
      </ul> 
      </div> 
     </li> 
     <li><div><p class="hidden">Test 2</p> 
      <ul class="shown"> 
       <li> 
        <a href="#"><p>Inner 2</p></a> 
       </li> 
      </ul> 
      </div> 
     </li> 
    </ul> 
    <ul> 

jque

$(document).ready(function() { 
$('.shown').hide(); 
$('.hidden').click(function() { 
    var $answer = $(this).next('.shown'); 
    if ($answer.is(':hidden')) { 
     $answer.show(); 
        $('.hidden').addClass('color1'); 
    } else { 
     $answer.hide(); 
     $('.hidden').removeClass('color1'); 
    } 
}); 

    }); 

CSS

.color1{ 
    background:red; 
} 

的jsfiddle

至$

https://jsfiddle.net/Lc5n8k81/1/

Answer 1

這裏同時添加和刪除顏色1級變化$（ '隱藏'） （本）..爲$（ '隱藏'。）將增加類的所有元素與.hidden類

的jsfiddle：https://jsfiddle.net/6moznpbr/

$(document).ready(function() { 
    $('.shown').hide(); 
    $('.hidden').click(function() { 
     var $answer = $(this).next('.shown'); 
     if ($answer.is(':hidden')) { 
      $answer.show(); 
         $(this).addClass('color1'); 
     } else { 
      $answer.hide(); 
      $(this).removeClass('color1'); 
     } 
    }); 
}); 

Answer 2

內的點擊處理程序，您需要參考$(this)不$('.hidden') - 後者手段所有元件與hidden類：

$('.hidden').click(function() { 
    var $answer = $(this).next('.shown'); 
    if ($answer.is(':hidden')) { 
     $answer.show(); 
     $(this).addClass('color1'); 
    } else { 
     $answer.hide(); 
     $(this).removeClass('color1'); 
    } 
}); 

https://jsfiddle.net/Lc5n8k81/2/