Question

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

我有2个父类别。我希望这些显示，但不是可点击的链接。

您可以在此处查看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

CSS仅控制样式，因此没有可用于禁用超链接的CSS。您可以将CSS更改为不更改游标，因此它不会＆＃34;看起来＆＃34;像一个链接。

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

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

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

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

如果你是大胆的，你可能还可以修改小部件，不为父母打印<a>链接，但我现在无法检查。

修改

您可以将脚本添加到主题的一个脚本中，加载新的外部脚本文件或将以下内容放入主题中。的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');

Answer 2

所有家长班都有“猫父母”。 class，所以你可以添加条件 - ＆＃39; javascript：void（0）＆＃39; - 用于锚标记的小部件＆＃39; href＆＃39;。或者，您可以添加以下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)');
  } 

});

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

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

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

2 个答案: