2014-12-06 2 views
0

중첩 된 ul의 수에 따라 드롭 다운 메뉴의 너비를 변경해야합니다.중첩 된 ul의 수에 따라 드롭 다운 메뉴의 너비를 변경해야합니다.

if($('.mg-main-menu li .submenu li ul').size() == 1) 
{ 
    $('.mg-main-menu li .submenu').css({"width" : "250px"}); 
}; 


if($('.mg-main-menu li .submenu li ul').size() == 2) 
{ 
    $('.mg-main-menu li .submenu').css({"width" : "500px"}); 
}; 


if($('.mg-main-menu li .submenu li ul').size() == 3) 
{ 
    $('.mg-main-menu li .submenu').css({"width" : "750px"}); 
}; 


if($('.mg-main-menu li .submenu li ul').size() == 4) 
{ 
    $('.mg-main-menu li .submenu').css({"width" : 1000px"}); 
}; 

구조

<ul class="mg-main-menu"> 
    <li><a href="#"></a> 
     <ul class="submenu"> 
      <li><a href="#"></a> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 

    <li><a href="#"></a>  
     <ul class="submenu"> 
      <li><a href="#"></a> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 

    <li><a href="#"></a> 
     <ul class="submenu"> 
      <li><a href="#"></a> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 

    <li><a href="#"></a> 
     <ul class="submenu"> 
      <li><a href="#"></a> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
       <ul> 
        <li><a href="#"></a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

코드가 작동하지 않습니다 :)

(이) 폭이 정확하게 원하는 카테고리에 적용 할 속성 $ 작업 코드를 작성하는 방법 모두가 아니라.

어떻게하는지 이해할 수 없으므로 도움주세요.

+0

당신이하려는 일을 분명히하고, 충분한 맥락을 제공하고, 문제의 jsfiddle/codepen 재생산을 만들 수 있습니다. – hon2a

+0

1,2,3,4 ul의 드롭 다운 메뉴에서 그 크기를 바꾸고 싶습니다. 모든 것이 분명해 보이는 것 같습니다 ... – kaluk

+1

귀하의 HTML 및/또는 작동하지 않는 _what_에 대한 명확한 설명을 제공하지 않았습니다. sidenote에서'.size()'대신 [.length'를 사용해야합니다. ([documentation] (http://api.jquery.com/size/) 참조). – hon2a

답변

0

난 당신이 뭔가를 찾고 생각 :

$('.mg-main-menu li .submenu').each(function() { 
    $(this).css({ 
     width: (250 * Math.min($('li ul', this).length, 4)) + 'px' 
    }); 
}); 

가 (당신이 폭을 제한하지 않으려면 Math.max() 호출을 제거).

+0

작동! 정말 고맙습니다! – kaluk

+0

답이 적절하면 _accepted_로 표시하십시오. – hon2a

관련 문제