직접 부모 목록 항목을 모두 mmenu로 선택하십시오.

Question

jQuery 플러그인 mmenu (http://mmenu.frebsite.nl/)를 사용할 프로젝트에서 작업하고 있습니다.

나는 내 요구에 맞는 맞춤 설정을해야했지만 현재 문제는 어떻게 처리해야할지 모르겠다. mmenu에서 목록 항목을 클릭하면 지정된 href로 이동하고 클릭 한 항목이 mmenus css 클래스 ".mm-selected"에 의해 활성화됩니다. 여태까지는 그런대로 잘됐다.

이제 부모 목록 항목 (메뉴 루트까지 부모 등)을 선택하여 표시하고 싶습니다. 이것은 사용자가 메뉴에서 한 레벨 위로 올라가면 그가 현재 어떤 카테고리에서 볼 수있게해야합니다. mmenu 적용한 후

는 다음 메뉴의 HTML 구조의 일례이다. 이것은 4 개의 기본 페이지 (index, page1, page2 및 page3)와 3 개의 서브 페이지 (2.1, 2.2, 2.3)가있는 메뉴의 코드를 보여줍니다.

<nav id="nav" class="mm-menu mm-horizontal mm-offcanvas mm-hasheader mm-current mm-opened"> 
    <ul class="mm-list mm-panel mm-opened mm-current" id="mm-0"> 
     <li class="mm-selected"> 
      <a href="#/index">Index</a> 
     </li> 
     <li> 
      <a href="#/page1">Page 1</a> 
     </li> 
     <li> 
      <a class="mm-subopen mm-fullsubopen" href="#mm-1"></a> 
      <span>Page 2</span> 
     </li> 
     <li> 
      <a href="#/Page 3">Page 3</a> 
     </li> 
    </ul> 
    <ul class="mm-list mm-panel mm-highest" id="mm-1"> 
     <li class="mm-subtitle"> 
      <a class="mm-subclose" href="#mm-0">Page 2</a> 
     </li> 
     <li> 
      <a href="#/page2-1">Page 2.1</a> 
     </li> 
     <li> 
      <a href="#/page2-2">Page 2.2</a> 
     </li> 
     <li> 
      <a href="#/page2-3">Page 2-3</a> 
     </li> 
    </ul> 
</nav> 

그런 기능을 어디서 어떻게 구현할 수 있는지 생각하면 좋을 것입니다.

Answer 1

그래서 잠시 jQuery 해킹을했습니다. 이것은 위에서 언급 한 나의 경우에 효과가있는 것 같습니다. 재귀를 사용함에 따라 더 깊은 메뉴에서도 작동해야합니다. 이를 달성 할 수있는 더 좋은 방법이 있다면 알려 주시기 바랍니다.

var nav = $("#nav"); 

nav.find("li > a:not(.mm-subopen)").click(function() { 
    nav.find("li.active").removeClass("active"); 
    selectParentEntry($(this)); 
}); 

var selectParentEntry = function (a) { 
    var li  = a.parent(), 
     ul  = li.parent(), 
     back = ul.find("li > a.mm-subclose").first(), 
     cID  = "#" + ul.attr("id"), 
     pID  = back.length ? back.attr("href") : null; 

    li.addClass("active"); 

    if (pID != null) { 
     var subOpen = nav.find("ul" + pID + " > li > a.mm-subopen").filter(function() {     
      var self = $(this); 
      if (self.attr("href") === cID) return self; 
     }).first(); 

     if (subOpen) selectParentEntry(subOpen); 
    } 
};