제이쿼리를 이용해서 섹션을 여닫을 수 있는 카테고리 버튼을 만들었는데요,
- 두 번 클릭해야 클릭 이벤트가 실행됨
- 한 번 실행한 후에는 한 번만 클릭해도 정상적으로 실행됨
이 문제였습니다.
먼저 js입니다. 클릭해서 열리고 닫힐 때 data-click값을 변경해주는 방법을 사용했습니다.
<script>
function toggleCategory(category, contentSelector) {
let data = category.attr("data-click");
if (data === "close") {
category.attr({ "data-click": "open" });
$(contentSelector).slideUp(200);
category.css("background-color", "transparent").css("border", "1px solid var(green)").css("color", "var(--fautor-green)");
category.children("img").attr("src", "이미지.jpg").css({'transform':'rotate('+-90+'deg)'});
} else {
category.attr({ "data-click": "close" });
$(contentSelector).slideDown(200);
category.css("background-color", "var(green)").css("border", "none").css("color", "#222222");
category.children("img").attr("src", "이미지.jpg").css({'transform':'rotate('+360+'deg)'});
}
}
</script>아래는 html 구조입니다.
<html>
<div id="section3">
<div class="category">
<h2>카테고리 버튼</h2>
<img src="이미지.svg" alt="이미지">
</div>
</html>크롬 개발자 도구를 열어 확인해보니
.category 안에 data-click="close"를 먼저 붙이느라 한 번에 실행이 안되는 거였따!
(즉, 클릭을 한 번 하면 토글이 실행되기 이전에 data-click값을 먼저 달아주느라 2번 클릭해야 하는것!)
close 상태에서는 원상태로 돌아오는 코드를 적었기 때문에
아무 변화도 일어나지 않는 것처럼 보인것이다.
(360도 변화라니 멋지네요)
그래서 간단하게
<html>
<div id="section3">
<div class="category" data-click="close">
<h2>카테고리 버튼</h2>
<img src="이미지.svg" alt="이미지">
</div>
</html>.category 태그 안에, 처음부터 close 상태가 되도록 작성해주었다.
말끔히 해결^^
저녁놀 마을 사람