2016-09-26 3 views
0

사용자가 메뉴를 클릭하면 펼쳐지고 접히는 사이드 바 메뉴 탐색에 대해 작업하고 있습니다. 그 위에 페이지가로드 될 때 하위 메뉴의 링크가 활성화되어 있으면 메뉴가 확장 된 상태로 유지되기를 원합니다.Jquery 펼치기 및 접기 메뉴가 작동하지 않습니다.

이것은 현재 작업하고있는 코드 샘플입니다. 누군가 내 코드에서 문제를 확인하는 데 도움을 줄 수 있습니까?

jQuery(document).ready(function(e) { 
 
    { 
 
    var m = e("ul.menu li.sidebar ul.sub-menu"); 
 
    e("li") 
 
    } 
 
    e("ul.menu > li.sidebar > a").click(function(e) { 
 
     e.preventDefault() 
 
    }), 
 
    e(document).mouseup(function(i) { 
 
     var n = e("li.sidebar"); 
 
     n.is(i.target) || 0 !== n.has(i.target).length || m.hide("fast") 
 
    }); 
 
});
.sidebar { 
 
    padding: 0 !important; 
 
    margin-top: 2%; 
 
} 
 
.sidebar a { 
 
    background-color: #122842; 
 
    padding: 3%; 
 
    color: white !important; 
 
} 
 
.sidebar .sidebar-submenu a { 
 
    color: #6e6e6e !important; 
 
    background-color: #e1ecf1 !important; 
 
    display: block; 
 
} 
 
.sidebar .current-menu-item a { 
 
    color: #22374f !important 
 
} 
 
.sidebar .sub-menu { 
 
    display: none; 
 
} 
 
.current-menu-ancestor .sub-menu { 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<ul class="menu "> 
 
    <li class="sidebar current-menu-ancestor"><a href="#">Menu A ▶</a> 
 
    <ul class="sub-menu"> 
 
     <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/">submenu 1</a> 
 
     </li> 
 
     <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/#sectionb">submenu 2</a> 
 
     </li> 
 
     <li class="sidebar-submenu"><a href="a.com/menu2">submenu 3</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="sidebar current-menu-ancestor"><a href="#">Menu B ▶</a> 
 
    <ul class="sub-menu"> 
 
     <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/#sectionc">submenu 4</a> 
 
     </li> 
 
     <li class="sidebar-submenu"><a href="a.com/menu2/#sectionb">submenu 5</a> 
 
     </li> 
 
     <li class="sidebar-submenu"><a href="a.com/menu3">submenu 6</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="sidebar"><a href="#">Menu C ▶</a> 
 
    <ul class="sub-menu"> 
 
     <li class="sidebar-submenu"><a href="a.com/menu4">submenu 7</a> 
 
     </li> 
 
     <li class="sidebar-submenu"><a href="a.com/menu5">submenu 8</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>
이들은 내가 달성하고자하는 동작은 다음과 같습니다

  • 하위 메뉴 1, 메뉴 2, 및 하위 메뉴 4는 동일한 페이지 만 다른 '메뉴'에있다 . 페이지를 선택하면 메뉴 A와 메뉴 B가 모두 확장되어 메뉴 C가 축소 된 상태로 유지됩니다.
  • 메뉴 A에있는 하위 메뉴 3을 클릭하면 페이지가로드 될 때 메뉴 B와 C가 축소되는 동안 메뉴 A가 확장됩니다. 하위 메뉴가 활성화 될 때마다
  • 는, 클래스 "현재 메뉴 항목" 리 태그와 클래스 "현재 메뉴 조상"에 추가됩니다 UL 태그에 내가 가진

문제를 추가 지금 :

  • 메뉴가 자동으로 하위 메뉴가 활성화되면 확장,하지만 메뉴를 클릭 할 수 있습니다
  • 나는 아래의 코드로 jQuery를 대체 메뉴를 클릭 할 자동으로 확장 하위 메뉴가 이 뽑은하지만 서브 메뉴)}

    jQuery(document).ready(function(e){ 
    jQuery('.sidebar a').click(function(e){ 
         e.preventDefault(); 
    if (jQuery(('.sidebar').children('.sub-menu:first').is(':visible')) { 
          jQuery(('.sidebar').children('.sub-menu:first').hide(); 
         } else { 
          jQuery(('.sidebar').children('.sub-menu:first').show(); 
         } 
    

    (링크 개방되지 않음)를 클릭 할 수있다; }});

감사합니다.

답변

0

이 추가 정보를 stack-cookie-is-not-function

을 위해 단지 JQuery와

<script src="path/to/Scripts/jquery_cookie.js" type="text/javascript"></script> 

확인 후 머리에 JQuery와 쿠키 라이브러리를 추가하십시오