jQuery的垂直导航 - 效果基本show了slideDown

Question

我用这个HTML结构：

<div id="products"> 
    <ul> 
     <li class="selected"><a href="#">Item 1</a> 
      <ul> 
       <li><a href="#">Sub-Item 1 a</a></li> 
       <li><a href="#">Sub-Item 1 b</a></li> 
       <li><a href="#">Sub-Item 1 c</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item 2</a> 
      <ul> 
       <li><a href="#">Sub-Item 2 a</a></li> 
       <li><a href="#">Sub-Item 2 b</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item 3</a> 
      <ul> 
       <li><a href="#">Sub-Item 3 a</a></li> 
       <li><a href="#">Sub-Item 3 b</a></li> 
       <li><a href="#">Sub-Item 3 c</a></li> 
       <li><a href="#">Sub-Item 3 d</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item 4</a> 
      <ul> 
       <li><a href="#">Sub-Item 4 a</a></li> 
       <li><a href="#">Sub-Item 4 b</a></li> 
       <li><a href="#">Sub-Item 4 c</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

这jQuery代码：

$(document).ready(function() { 

    $("#products li").click(function() { 
     if ($(this).attr('class') != 'selected') { 
      $('#products li').removeClass('selected'); 
      $(this).addClass('selected'); 
      } 
    }); 


    $("#products li").click(function() { 
     $('#products li ul').slideUp(); 
     $('#products li.selected ul').slideDown(); 

    }); 

}); 

问题：

我只希望有上下滑动对第一级物品的影响（< li>） 没有在子项目上

还有一个问题 - 如果列表项已经是class =“selected”，并且您点击它，它会向上滑动，然后再向下...（如果它已经是什么都不应该发生）

有人可以帮助使用jquery代码？

Answer 1

将您的选择器更改为$('#products > ul > li')，它将只选择直接的孩子。

---

或者你也可以改变整个代码更具可读性和较少的repetetive：

var $topLevelItems = $("#products > ul > li"); 

$topLevelItems.click(function() { 
    if (!$(this).hasClass('selected')) { 
     $topLevelItems.removeClass('selected') 
         .find('ul') 
         .slideUp(); 

     $(this).addClass('selected') 
       .find('ul') 
       .slideDown(); 
    } 
}); 

Answer 2

您可以:not选择或.not做

$('#products > li:not(.selected)').click(function() { 
     $('#products li ul').slideUp(); 
     $('#products li.selected ul').slideDown(); 
    }); 

Answer 3

尝试了这一点：

演示：http://jsfiddle.net/LEdgT/6/

$(document).ready(function() { 
    $("#products > ul > li").click(function() { 
     if ($(this).has('ul')) { 
      if ($(this).hasClass('selected')) { 
       $(this).removeClass('selected') 
         .find('ul').slideUp(); 
      } 
      else { 
       $(this).addClass('selected') 
         .find('ul').slideDown(); 
      } 
     } 
    }); 
});