javascript - 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).next("ul").show();

jsfiddle