토글 스크립트 버튼 두개로 하려면 어떻게 수정해야 할까요?
본문
<span class="panelclose" alt="닫힘버튼></span>
<ul>
<li> 버튼1</li>
<li class="q-btn2">버튼2</p></li>
<div class="popup-content" style="display:none">
토글 내용이 뜨는 부분
<li> 버튼2</li>
<li> 버튼3</li>
</ul>
<script type="text/javascript">
$(".popup-content").hide();
$('.q-btn2').click(function() {
if($('.popup-content').hasClass("open")) {
$('.popup-content').css("display","none");
$('.popup-content').removeClass("open");
}else{
$('.popup-content').css("display","block");
$('.popup-content').addClass("open");
}
});
</script>
<script type="text/javascript">
$(function(){
$(".panelclose").click(function(){
$(".popup-content").hide();
$(this).hide();
});
});
</script>
이 상태에서 클릭시 토글창이 사라지긴 하지만 (.q-btn2 이 버튼)으로 다시 열었을떄
(.panelclose 닫힘버튼) 이 이미 사라져서 보이지가 않네요~
열떄는 (.q-btn2 이 버튼) 로 열리지만 닫힐때는 (.q-btn2 이 버튼) 로도 닫히고
(.panelclose 닫힘버튼) 로도 두가지로 닫히게 했으면 좋겠어요. 감사합니다
답변 1
<span class="panelclose" alt="닫힘버튼">닫힘버튼</span>
<ul>
<li> 버튼1</li>
<li class="q-btn2">버튼2</li>
<div class="popup-content" style="display:none">
토글 내용이 뜨는 부분
</div>
<li> 버튼2</li>
<li> 버튼3</li>
</ul>
<script type="text/javascript">
$(function(){
$(".popup-content").hide();
$('.q-btn2 , .panelclose').click(function() {
if($('.popup-content').hasClass("open")) {
$('.popup-content').css("display","none");
$('.popup-content').removeClass("open");
}else{
$('.popup-content').css("display","block");
$('.popup-content').addClass("open");
}
})
});
</script>
핑크빈님 두 번이나... 도와주셔서 감사합니다~ 이것 역시 정상적으로 작동합니다!