2014-10-18 75 views
1

我得到了一個jQuery切換,似乎工作,但是當我再次點擊它時,它似乎不想滑下它被點擊。我甚至試圖點擊其他人。切換點擊,但不會滑落一旦點擊

我在做什麼錯?我已經去過了,但也許我錯過了一些相對簡單的事情。

的javascript:

$(function() {   
       $("li.subMenu").click(function() {  
        $(".subMenu-link").slideUp("normal"); 
        $(this).next().slideDown(); 
       });  
       $(".subMenu-link").not(':first').hide(); 
      }); 

HTML:

<li class="subMenu">          
    <i class="lock"></i> 
    <span class="title">User Account</span> 
    <span class="toggle">+</span> 
     <ul class="subMenu-link"> 
      <li>One Link</li> 
      <li>One Link</li> 
      <li>One Link</li> 
      <li>One Link</li> 
     </ul> 
</li> 

JSFiddle

+1

這是你想要做什麼? http://jsfiddle.net/qj58Lm5q/1/ – 2014-10-18 00:44:02

+1

你打電話給$(this).next(),但li.submenu是$(this),它沒有next()。 – 2014-10-18 00:47:19

回答

2

此:

$(this).next(); 

選擇下一個裏子菜單項,你可以說是alread y「向下」(可見)。您可能想要在子菜單項中下拉無序列表。您可以通過孩子們訪問:

$(this).next().children('.subMenu-link').slideDown(); 

如果點擊了第一個它會隱藏第一個,然後顯示第二個。如果點擊第二個,它會隱藏第二個並顯示第三個。然而,如果你點擊第三個元素,那麼它只會滑動該元素而不滑動,因爲沒有第四個元素。

如果你正在嘗試做的是一個顯示和隱藏別人,你可以用兄弟姐妹來代替:

$("li.subMenu").click(function() {  
       $(this).children(".subMenu-link").slideDown("normal"); 
       $(this).siblings().children('.subMenu-link').slideUp(); 
      });