채택완료

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

2019-08-19 (월) 16:33:00 4,012

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

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

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

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

1794703588_1566199924.0095.jpg

|

답변 1개

채택된 답변
+20 포인트

저런건 보통 클릭시 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(); 
    }); 
}); 

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

답변을 작성하려면 로그인이 필요합니다.