jQuery - 单击链接时无法显示下拉列表

Question

我有一个标题，正在尝试创建没有Bootstrap的下拉菜单。

当我点击一个链接时，我想要显示下拉菜单。它默认是隐藏的。我试着用jQuery来显示列表。

HTML

<div class="menu"> 
    <div class="menu_center"> 
     <a href="#">Products</a> 
     <ul> 
      <li><a href="#">Clothing</a></li> 
      <li><a href="#">Stationary</a></li> 
      <li><a href="#">Other</a> 
     </ul> 

     <a href="#">Promotions</a> 

     <a href="#">About Us</a> 
     <ul> 
      <li><a href="#">Philosophy</a></li> 
      <li><a href="#">Our Suppliers</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 

     <a href="#">Your Cart:</a> 
     <ul> 
      <li><a href="#">Tech{Yourself} T-Shirt: Blue, Large - $19.95</a></li> 
      <li><a href="#">Tech{Yourself} Owl Plush Toy - $19.95</a></li> 
      <li><b>Total: $39.90</b> <button class="js-check-out">Check Out</button></li> 
     </ul> 
    </div> 
    </div> 

CSS

html body{ 
    font-family:'Open Sans',sans-serif; 
    font-size:16px; 
    line-height:18px; 
    color:#000; 
    font-weight:400; 
} 

.menu_center a { 
    text-decoration: none; 
} 

jQuery的

$(document).ready(function() { 
    $(".menu_center ul").hide(); 
    $(".menu_center > a").on("click", function() { 
     $(this).children("ul").show(); 
    }); 
}); 

http://jsfiddle.net/9ov9za3r/1/

不知道为什么，这是行不通的。

Answer 1

的ul元素不是a元素的孩子，你需要做：此

$(this).children("ul").show(); 

：

$(this).next("ul").show(); 

jsfiddle

Answer 2

替换此

$(this).next("ul").slideToggle(); 

的ul不是孩子，它的下一个元素a标签

，你可能想使用toggle()，fadeToggle()或slideToggle()，而不是仅仅show()能够再次隐藏菜单当u点击之后它似乎

Here is the JSFiddle demo