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

Answer 2

替换它：

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

由此：

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

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

并且您可能希望使用toggle()，fadeToggle()或slideToggle()而不仅仅是show()，以便在您看到菜单后再次点击该菜单时再次隐藏该菜单

Here is the JSFiddle demo

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

2 个答案: