如何启用 href 进行切换

Question

我的菜单切换只适用于 font awesome 的图标，但我想同时使用 href 和 icon 切换，这次切换只适用于图标

$("ul.product-categories li.hassub a").after('<i class="fa fa-plus"></i>');
$("ul li.hassub i").click(function() {
  $(this).next().slideToggle();
  $(this).toggleClass("active");
  $(this).parent().toggleClass("active");
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="widget-title">Categories</h3>
<ul class="product-categories">
  <li><a href="#" title="Men">Men</a>
    <ul class="children">
      <li><a href="#" title="Bag & Luggage">Bag & Luggage</a></li>
      <li><a href="#" title="Eyewear">Eyewear</a></li>
      <li><a href="#" title="Jewelry">Jewelry</a></li>
      <li><a href="#" title="Shoes">Shoes</a></li>
      <li><a href="#" title="Skyrts">Skyrts</a></li>
    </ul>
  </li>
  <li><a href="#" title="woment">woment</a>
    <ul>
      <li><a href="#" title="Bag">Bag</a></li>
      <li><a href="#" title="Bed & Bath">Bed & Bath</a></li>
      <li><a href="#" title="Sport tops & Vest">Sport tops & Vest</a></li>
      <li><a href="#" title="Sport undewear">Sport undewear</a></li>
    </ul>
  </li>
  <li><a href="#" title="kids">kids</a></li>
  <li><a href="#" title="All Product">All Product</a></li>
</ul>

Answer 1

我已经解决了这个双重功能的问题：

 $("ul.product-categories li.hassub a").after('<i class="fa fa-plus"></i>');
    	   $("ul li.hassub a").click(function(){
    		$(this).next().next().slideToggle();   
    		$(this).next().toggleClass("active");   
    		$(this).next().parent().toggleClass("active");   
    		   
    	   })
    	$("ul li.hassub i").click(function(){
    		$(this).next().slideToggle();
    		$(this).toggleClass("active");
    		$(this).parent().toggleClass("active");
    	});