[Jquery] toggleclass 작동 안 함 not working

<p class="showMore"></p>

$(".showMore").on("click", function() {
  $(this).toggleClass("expanded");
});

클래스의 클릭 이벤트를 캐치하여 expanded라는 클래스가 없으면 넣어주고, 있으면 없애는 간단한 코드가 작동 안 하는 현상을 발견했습니다. 클릭 이벤트도 정상적으로 발동하고 addClass는 또 되는 것 같고 이것저것 알아보다 알아낸 사실은  $(this)로 잡아준 앨리먼트에 showMore이라는 다른 클래스가 있어서 그런 것 같더라고요.

 

showMore을 id로 수정하면 정상 작동이 되는데 여러번 반복되는 엘리먼트가 있어서 id로는 지정해줄 수 없어 상위 div를 만들어 showMore이라는 클래스를 넣어주고 children()을 통해 p태그에 expanded를 추가했다가 없애도록 해주니 정상 작동했습니다.

<div class="showMore">
  <p></p>
</div>

$(".showMore").on("click", function() {
  $(this).children().toggleClass("expanded");
});

 

다른 코드에서는 다른 클래스가 존재하더라도 toggleclass가 잘 작동하는데 왜 이 코드는 안 되는지 정확한 이유는 파악하지 못했습니다. 혹시 관련 오류에 대해서 더 자세히 아시는 분은 댓글로 알려주시면 감사하겠습니다.