将类添加到一个元素而不是所有元素，例如

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/