css 当菜单更改为适合较小屏幕尺寸时,超链接不工作

vsdwdz23  于 2022-12-24  发布在  其他
关注(0)|答案(1)|浏览(143)

当屏幕尺寸变小以适应不同的设备时,我的网站的菜单会发生变化。
所有链接都在完整菜单上工作。但是,当菜单更改为适合较小的设备时,菜单下拉中的链接无法单击,但链接就在那里,因为当我在新标签中打开它时,它会转到正确的位置。
我假设也许我的CSS中有什么东西阻止了它的工作。
网站是privateinvestigator-wrexham.co.uk
我已经在谷歌上搜索过了,试图找到一些建议。但是,我似乎找不到很多文章。有一个关于堆栈溢出的问题是相同的,答案建议填充重叠,但它看起来不像我有任何填充重叠。
任何建议都将不胜感激。先谢了。

<div class="accordion-mobileContainer">
<div class="accordion-mobile">
<dl>
<dt><a class="accordion-mobileTitle">Matrimonial</a></dt>
<dd class="accordion-mobileItem accordion-mobileItemCollapsed">
<div  class="accordion-mobileContent">
<ul style="margin-bottom:0px;">
<li><a href="/surveillance-in-wrexham/matrimonial-surveillance-in-wrexham/">- Matrimonial Surveillance</a></li>
<li><a href="/investigations-in-wrexham/matrimonial-investigations-in-wrexham/">- Matrimonial Investigations</a></li>
<li><a href="/investigations-in-wrexham/proof-of-cohabitation-investigations-in-wrexham/">- Proof of Cohabitation</a></li>
<li><a href="/investigations-in-wrexham/background-check-investigations-in-wrexham/partner-background-check-investigations/">- Partner Background Checks</a></li>
<li><a href="/lie-detector-test-in-wrexham/matrimonial-lie-detector-test-in-wrexham/">- Matrimonial Lie Detector Tests</a></li>
</ul>
</div>
</dd>
</dl>
</div>
</div>
oxiaedzo

oxiaedzo1#

您的HTML没有问题,问题是您的站点上有一个脚本(https://privateinvestigator-wrexham.co.uk/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js,注意:此链接可能会随时间而更改),并使用以下代码片段(尽管看起来可能不像,因为它已缩小):

$('.accordion-mobile').click(function(e) {
e.stopPropagation();
e.preventDefault();

这里的preventDefault()可能是让你头疼的原因。It prevents the default behavior的元素,比如<a>打开一个链接。因此,.accordion-mobile元素中的所有链接都不能工作。
要解决这个问题,要么修改上面的代码(这将是我的建议),或者manually navigate到点击的页面。
希望能有所帮助!

相关问题