html - 单击 css 时禁用超链接

Question

我有一个由 div 构成的菜单。为此，我使用默认的 Joomla 菜单，根据我自己的喜好进行了修改。这是一个 html 问题，所以这就是我将其张贴在这里的原因。

在其下方具有子菜单的顶级菜单项的类称为“更深层次的父级”。单击它时，我希望它只打开子菜单，而不是转到它的链接。

我试过了

.deeper {
pointer-events: none;
   cursor: default;
}

.parent {
pointer-events: none;
   cursor: default;
}

然而，这也禁用了子菜单的显示，它在我使用此 css 代码之前确实出现了。

有谁知道如何让子菜单在鼠标悬停时以及在单击时(对于表格 ;))出现，而无需引用顶部菜单项后面的链接？

Answer 1

您不能使用 CSS 禁用点击事件。这必须使用 Javascript/jQuery 完成。

假设您在大多数 Joomla 网站都在您的网站上使用 jQuery，您可以使用以下内容:

$(document).ready(function(){

   $('#element').on('click', function(){ 
      e.preventDefault();

      // Rest of code to show the menu  
   });

});

您还可以在 Joomla 菜单管理器中将父菜单项的类型设置为分隔符，它将菜单项包装在<span>中。标签而不是 <a>