모든

2012-06-06 2 views
1

내가 같이 보이는, 수직 슬라이딩 메뉴가 slideToggle하지 마십시오모든

<ul class="menu"> 
     <li>link</li> 
     <li>link</li> 
     <li class="more">link with submenu</li> 
      <ul class="submenu"> 
       <li>sub link 1</li> 
       <li>sub link 2</li> 
      </ul> 
     <li class="more">link with submenu</li> 
      <ul class="submenu"> 
       <li>sub link 1</li> 
       <li>sub link 2</li> 
      </ul> 
     <li>link</li> 
     <li>link</li> 

    </ul> 

JQuery와는 다음과 같이이다 :

jQuery(document).ready(function($) { 

$(".more").click(function() { 

$(this).parent().children(".submenu").slideToggle(500); }); 
}); 

내 문제는, 내가 클릭 할 때 " .more ", 모든".submenu "는 slideToggle (둘 다 열림)입니다.

슬라이드 덤블 된 올바른 서브 메뉴 일 수 있습니까?

감사합니다.

답변

6

.parent()로 전화를 제거하십시오. 또한, 당신의 .submenu<li>중첩되어야한다는 다음과 같은 jQuery를 당신을 떠나 속한 :

$("li.more").on("click", function() { 
    $("ul.submenu", this).slideToggle(500); 
}); 

그리고이 마크 업 :

<ul class="menu"> 
    <li>link</li> 
    <li>link</li> 
    <li class="more"> 
     link with submenu 
     <ul class="submenu"> 
      <li>sub link 1</li> 
      <li>sub link 2</li> 
     </ul> 
    </li> 
    <li class="more"> 
     link with submenu 
     <ul class="submenu"> 
      <li>sub link 1</li> 
      <li>sub link 2</li> 
     </ul> 
    </li> 
    <li>link</li> 
    <li>link</li> 
</ul> 
+0

좋은 마크 업 캐치. – Loktar

0

이 하나?

$(this).next().eq(0).slideToggle(500); }); 
관련 문제