javascript显示隐藏Ul> li on anchor tag click

时间:2017-06-07 05:35:09

标签: javascript jquery html html5

我想点击锚标记时打开ul动态li

<a href="javascript:void(0);" class="shop-category"><i class="fa fa-bars" aria-hidden="true"></i><span>SHOP ALL CATEGORIES</span></a>
<ul>
    <li>
        <a href="{{ tree_category.get_absolute_url }}">
            <i class="fa fa-shopping-basket"></i>
            <span class="title">{{tree_category}}</span>  
</a>
    </li>
</ul>

到目前为止,我所做的是:

<script>
    $(".shop-category").filter(function(){
        return ( $(this).siblings('ul').length > 0 );
        }).on("click", function(e) {
        e.preventDefault();
        // hide sibling ul element (if it exists)
        $(this).siblings("ul").toggle();
    });
</script>

但没有运气。

1 个答案:

答案 0 :(得分:2)

嘿,我认为你在脚本标签中遗漏了一些东西。请替换以下代码。希望你的问题能够得到解决。祝你好运。这是代码。

$(document).ready(function() {
$(".shop-category").filter(function(){
  return ( $(this).siblings('ul').length > 0 );
  }).on("click", function(e) {
  e.preventDefault();
  // hide sibling ul element (if it exists)
  $(this).siblings("ul").toggle();
});
});