초보자 제이쿼리 질문이요

초보자 제이쿼리 질문이요

QA

초보자 제이쿼리 질문이요

본문

2d0c3926e2ca172431e21aef9365e2c2_1469611962_1245.jpg
 

제가 만들고자 하는것이 위에 사진처럼 하는건데 도통 잘 모르겠네요 

스타일시트로는 대충 짰는데 제이쿼리 부분에서는 모르는 부분도 많고 해서 어떻게 해야하나요..

 

$(document).ready(function() {
$("ul.menubar > li").click(function(){
if ( $("li.launcher").hasClass("active") ) {
$("li.launcher").removeClass("active");
}
        $(this).addClass('active');
});
});

 

<section class="sidebar">
<ul class="menubar">
<li class="gnb">
<i class="fa fa-bars"></i>
<a href="#">메뉴</a>
<ul class="dropdown-menu">
<li>
<a href="#" title="전체메뉴보기"><button class="btn_all"><i class="fa fa-toggle-down"></i> 전체메뉴보기</button></a>
</li>
<li><i class="fa fa-file-text-o"></i> 정보관리 </li>
<li><i class="fa fa-shopping-cart"></i> 메뉴관리</li>
<li><i class="fa fa-users"></i> 회원관리</li>
<li><i class="fa fa-bar-chart"></i> 보고서/통계</li>
<li><i class="fa fa-commenting"></i> 커뮤니티</li>
<li><i class="fa fa-cog"></i> 환경설정</li>
</ul>
</li>
<li class="gnb">
<i class="fa fa-book"></i>
<a href="#">메뉴얼</a>
</li>
</ul>


</section>

 

이렇게 했는데 액티브하면 다 각자 따로 메뉴내용물이 나와야하는데 겹쳐서 나오더라구요..

그러니깐 하나 클릭하면 화살표시 나오고 그옆에 메뉴가 나오는데 다른쪽 건들면 같이 겹쳐서 나와서 어떻게 해야될지 감이 안잡혀요. 

좀 도와주시면 감사하겠습니다. 

 

 

 

 

이 질문에 댓글 쓰기 :

답변 3

저의 경우 each 로 해서 마우스 온/오프로 처리합니다.

클릭으로 처리하시려고하면

클릭했을때 모든것들을 일단 속성을 다 지워주고 클릭된것만 다시 적용해주는 방식으로 합니다.

$(document).ready(function() {
    $("ul.menubar > li").click(function(){
        $("ul.menubar > li").removeClass("active");
        $(this).addClass('active');
    });
});

이렇게 바꾸면 안되나요?
위에만 보고는
li.launcher <- 이게 어디부분인지 모르겠네요.
답변을 작성하시기 전에 로그인 해주세요.
전체 103
QA 내용 검색

회원로그인

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