접었다 펼쳤다 하는메뉴부분 질문좀 드리겠습니다.
본문
안녕하세요 질문좀 드리겠습니다.
아래와 같이 클릭하면 하단에 나오는 메뉴를 구상할려고 합니다
혹시 어느정도 완성본 소스가 있을까요?
구글링해서 검색해서 여러개 하봤는데 클릭하면 아예 css도깨지고 이래서 쉽지 않더라구요
답변 1
저런건 보통 클릭시 div show나 hide 이런 제이쿼리로 할겁니다.
토글이라고도 하죠.
그런데 일일이 메뉴마다 제이쿼리를 먹일수가 없으니 이런식으로 하는게 편할겁니다.
예를 들어서 패션/잡화와 뷰티를 예로 들자면
<li><a class="" id="mainmenu2" href="#" onclick="return false;" >패션/잡화</a> </li>
<div class="" id="submenu2" style="display: none;">
패션잡화 내용
</div>
<li><a class="" id="mainmenu3" href="#" onclick="return false;" >뷰티<</a> </li>
<div class="" id="submenu3" style="display: none;">
뷰티 내용
</div>
이렇게 객체 id 에 숫자를 넣고 제이쿼리를
$(document).ready(function() {
$('[id^=mainmenu]').click(function() {
$('[id^=submenu]').not($(this).next('[id^=submenu]').slideToggle("slow")).hide();
});
});
이런식으로 하면 제이쿼리 몇줄로만 모두 통제가 가능합니다.