접었다 펼쳤다 하는메뉴부분 질문좀 드리겠습니다.

접었다 펼쳤다 하는메뉴부분 질문좀 드리겠습니다.

QA

접었다 펼쳤다 하는메뉴부분 질문좀 드리겠습니다.

본문

안녕하세요 질문좀 드리겠습니다.

아래와 같이 클릭하면 하단에 나오는 메뉴를 구상할려고 합니다

혹시 어느정도 완성본 소스가 있을까요?

 

구글링해서 검색해서 여러개 하봤는데 클릭하면 아예 css도깨지고 이래서 쉽지 않더라구요 

 

 

 

1794703588_1566199924.0095.jpg

이 질문에 댓글 쓰기 :

답변 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(); 
    }); 
}); 

 

이런식으로 하면 제이쿼리 몇줄로만 모두 통제가 가능합니다.

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 167
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT