JavaScript显示锚点标签上的Hide Ul> li

Question

I want to open a ul which will have dynamic li when I click on a anchor tag.

<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>

What I have done so far is :

<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>

But No luck.

Answer 1

Hey I think you are missing something inside script tag. Please replace below codes. Hope your issue will be solved. Have a good luck. here is the code.

$(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();
});
});