형제가 아닌 여러 메뉴에 대해 리팩토링

Question

동일한 ul이 아닌 두 개의 메뉴가 포함 된 머리글 섹션을 만들었습니다. 메뉴가 클릭 할 때 하위 메뉴를 열고 클래스를 추가 (메뉴 열기)하고 싶습니다. 한 번에 하나의 메뉴 만 열어야합니다. 나는 jQuery를 사용하여 그것을 달성했다. 그러나, 나는 그것이 더 짧거나 더 잘 쓸 수있는 것처럼 느낀다. 나는 이것을 연구했고 사람들은 형제 요소를 사용하고있다. 그러나, 내 코드에서 메뉴에 대한 두 개의 uls는 분리되어 있으며 div의 가장자리에 뜬다.

여기 내 HTML입니다 :

<div> 
<ul class="menu-1 menu-btn"> 
    <li><a class="menu-link" href="">Menu 1</a> 
    <ul class="sub-menu"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    </ul> 
    </li> 
</ul> 
<ul class="menu-2 menu-btn"> 
    <li>link1</li> 
    <li>link2</li> 
    <li><a class=menu-link href="">Menu 2</a> 
    <ul class="sub-menu"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    </ul> 
    </li> 
</ul> 
</div> 

이 내 jsfiddle입니다 : 어떤 조언/도움이 감사 https://jsfiddle.net/8b8Lzm7v/10/

. 사전에 감사합니다.

Answer 1

이것은 조금 짧지 만 더 많은 메뉴를 추가하면 더 이상 기다릴 필요가 없습니다. 모든 메뉴를 폐쇄하고 특정이 이미 열려 있는지 여부를 확인 후 메뉴를 클릭 열기 전에 제안, 선택적으로 ... 비 메뉴 사업부를 클릭하면 모든 메뉴의를 닫 다른 클릭 핸들러를 추가

(function($) { 
 

 
    function hideMenus() { 
 
     $("ul.sub-menu").slideUp(100); // slide up all menus 
 
     $(".menu-link").removeClass("menu-open"); // no menus are open 
 
    } // hide all menu's as a function 
 

 
    $(".menu-link").on("click", function() { 
 
    var $this = $(this), 
 
     menuOpen = $this.hasClass("menu-open") || false; 
 

 
    hideMenus(); 
 

 
    if (!menuOpen) { // if the menu is closed... 
 
     $this.siblings('ul.sub-menu').slideDown(100); // this opens all .submenu's adjacent 
 
     $this.addClass("menu-open"); 
 
    } 
 
    return false; 
 
    }); 
 

 
    $('body').not('.menu-btn').on('click', function() { 
 
    hideMenus(); 
 
    return false; 
 
    }); // optional to hide menu's if any other div is clicked 
 

 
}(jQuery));

div { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
a { 
 
    display: block; 
 
} 
 
.menu-btn { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 
.menu-btn li { 
 
    display: inline-block; 
 
} 
 
.sub-menu { 
 
    display: none; 
 
    width: 100px; 
 
    position: absolute; 
 
    border: 1px solid gray; 
 
} 
 
.menu-1 .sub-menu { 
 
    left: 0; 
 
} 
 
.menu-2 .sub-menu { 
 
    right: 0; 
 
} 
 
.menu-2 { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul class="menu-1 menu-btn"> 
 
    <li><a class="menu-link" href="">Menu 1</a> 
 
     <ul class="sub-menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class="menu-2 menu-btn"> 
 
    <li>link1</li> 
 
    <li>link2</li> 
 
    <li><a class=menu-link href="">Menu 2</a> 
 
     <ul class="sub-menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>