woocommerce产品类别小部件禁用父类别链接

Question

我正在边栏和页脚小部件区域使用woocommerce产品类别小部件。

我有两个家长类别。我想这些被显示，但不是可点击的链接。

你可以在这里看到这一页http://www.terrykirkwood.co.uk/w

有人能建议添加什么css来阻止这些链接被点击吗？

谢谢

以下是第一次出现的代码：

<li class="cat-item cat-item-47 cat-parent"><a href="http://terrykirkwood.co.uk/w/product-category/originals/">Original Paintings</a><ul class="children">

Answer 1

所有父类都有一个“cat parent”类，因此您可以在小部件中为锚定标记“href”添加一个条件——“javascript:void（0）”。或者，您可以添加以下jquery代码，

jQuery('.footer-widget').find('.product-categories li.cat-parent').each(function(){ 

  if(jQuery(this).find('ul.children').length == 1){ 

    jQuery(this).find('a').attr('href','javascript: void(0)');
  } 

});

这将重置具有子类别的所有父类别链接。现在，如果用户点击父类别，它将不会做任何事情。

这也将确保，如果父类别没有子类别，则不会重置。

Answer 2

CSS只控制样式，所以没有CSS可以用来禁用超链接。您可以将CSS更改为不更改光标，这样它就不会“看起来”像链接。

.cat-parent a { 
    cursor: default;
    text-decoration: none;
}

.cat-parent .children a {
    cursor: pointer;
    text-decoration: underline;
}

然后使用一些jQuery来实际禁用单击功能：

$('.cat-parent').click(function(e) {
    e.preventDefault();
});

如果您是粗体的，您可能还可以修改小部件以不打印

编辑

您可以将脚本添加到主题的脚本之一，加载新的外部脚本文件，或将以下内容放入主题的functions.php：

function so_add_this_script_footer(){ 

    if( !is_admin() ) { ?>

    <script>
        jQuery(document).ready(function($) {
            $('.cat-parent > a').click(function(e) {
                e.preventDefault();
            });
        });
    </script>

<?php } 

}

add_action('wp_print_footer_scripts', 'so_add_this_script_footer');