带有链接

Question

我在Woocommerce中有以下类别结构：

    <li class="cat-item cat-item-7 cat-parent"><a href="https://example.com/cat-parent">Cat parent</a>
       <ul class="children">
          <li class="cat-item cat-item-10"><a href="https://example.com/cat-child-1">Cat child 1</a></li>
          <li class="cat-item cat-item-11"><a href="https://example.com/cat-child-2">Cat child 2</a></li>
          <li class="cat-item cat-item-12"><a href="https://example.com/cat-child-2">Cat child 3</a></li>
      </ul>
    </li>

我想创建折叠类别，但当我点击 Cat父折叠列表时，我会重定向到 Cat父页。

CSS:
    ul.children { display:none; }

JS:
    $('.cat-parent a').click(function(e){

      var $this = $(this);
      if($this.parent().hasClass('cat-parent')) {
        $('.children').slideUp();
      }
      var sub = $this.parent().find('> .children');
      if($(sub).is(":hidden")){
        e.preventDefault();
        $(sub).slideDown();
      }
    });