토글메뉴? javascript
본문
//slideBox
$('.worksToggle').css('display','none');
$('.defaultOpen').css('display','block');
$('.btn_worksToggle').click(function(){
$(this).next('.worksToggle').slideToggle('slow');
$(this).children('i').toggleClass('fa-chevron-circle-down fa-minus-circle');
});
위와 같은 스크립트를 이용해서
btn_worksToggle라는 버튼을 누르면
worksToggle라는 div로 감싼 내용들이 보이도록 설정했는데요...
이게... 각각 다른 div로 감싸고 있어서 적용이 안되는데
혹시 가능한 방법이 있을까요?
작성한 html내용이
<div class="pagearea">
<div class="area01"> <img class="imgarea" src="img.jpg" alt="img">
<div class="infoarea">
<h4>제목</h4>
<p class="pagetxt">더미텍스트</p>
<p class="btn_worksToggle"><i class="fa fa-chevron-circle-right"></i>View</p>
</div>
</div>
<div class="worksToggle defaultOpen">
<table>
<tr>
<th>제목</th>
<td>내용</td>
</tr>
</table>
<div class="works_news">
<h5>최신뉴스</h5>
<ul>
<li>
<time>2017.00.00</time>
<a href="#">
<p>뉴스제목</p>
</a> </li>
<li>
<time>2017.00.00</time>
<a href="#">
<p>뉴스제목。</p>
</a> </li>
<li>
<time>2017.00.00</time>
<a href="#">
<p>뉴스제목</p>
</a> </li>
</ul>
</div>
</div>
</div>
이런 내용이거든요...
혹시 저렇게 같은 곳에 없어도 적용이 가능한가요?
답변 1
//slideBox
$('.worksToggle').css('display','none');
$('.defaultOpen').css('display','block');
$('.btn_worksToggle').click(function(){
$('.worksToggle').slideToggle('slow');
$(this).children('i').toggleClass('fa-chevron-circle-down fa-minus-circle');
});
$(this).next 로는 찾을 수 없습니다.
앗... 감사합니다 !! 그 부분이었군요 ㅠ ㅠ ...
어떻게 실행은 될 것 같은데 어디가 문제인지를 몰라서 고생하고 있었네요 ㅠ ㅠ
감사합니다!!
답변을 작성하시기 전에 로그인 해주세요.