초보자 제이쿼리 질문이요
본문
제가 만들고자 하는것이 위에 사진처럼 하는건데 도통 잘 모르겠네요
스타일시트로는 대충 짰는데 제이쿼리 부분에서는 모르는 부분도 많고 해서 어떻게 해야하나요..
$(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 <- 이게 어디부분인지 모르겠네요.
.launcher는 안보여서 뺐습니다.
$(document).ready(function() {
$("ul.menubar > li").click(function(){
$(this).toggleClass('active').siblings().removeClass('active');
});
});
답변을 작성하시기 전에 로그인 해주세요.
