链接在 jquery 'tabs+accordion' 中不起作用的奇怪错误 [关闭]答案

【问题标题】：Weird bug where links don't work in jquery 'tabs+accordion' [closed]链接在 jquery 'tabs+accordion' 中不起作用的奇怪错误 [关闭]
【发布时间】：2012-12-15 05:01:54
【问题描述】：

我是新来的——到处寻找答案却找不到。

我正在使用来自 Codecanyon 的这个很棒的 tabs+accordion 插件，但是我试图放入内容区域的链接不起作用。

我正在尝试修复的实时站点在这里 - http://lrg-international.com/site/ - 您会注意到选项卡区域中的“了解更多”按钮没有点击。它们可以悬停，但单击它们没有任何作用。

谁能告诉我为什么此测试页面上“响应式”标签中“链接 1”之后的所有链接都不可点击/悬停？似乎与块级元素有关，但我可能完全走错了方向。

我已经向开发者询问过这个问题，因为它是付费插件，但他没有回复。有人可以帮忙吗？

【问题讨论】：

提供的示例在 Google Chrome 版本 23.0.1271.97 m 中对我来说很好。
真的吗？ “内部设计”选项卡中的“了解更多”按钮实际上会点击进入新页面？
Aaron，您能具体说明一下，哪些链接不适合您吗？
请允许我发布视频，稍等。
好的，我重命名了测试页面上的链接，链接 2 到 5 在 Chrome、FF 或 safari 中不可点击/悬停。

标签： jquery tabs hyperlink accordion

【解决方案1】：

在 David 和 Beetroot 的大力帮助下，探索了各种途径，结果证明它与 jquery-ui 'tabs' 脚本发生冲突。开发者告诉我删除这个：

jQuery(document).ready(function(){ 
jQuery(function() { 
jQuery(".tabs").tabs(".panes > div"); 
}); 


});

来自 custom.js

猜测插件需要为它们的元素提供更多独特的名称！

谢谢大家。

【讨论】：

别忘了把它标记为已回答！
Aaron 周围的人都松了一口气。嘿，让我们明天再做......
@Beetroot-Beetroot 没有 xD 怎么样

【解决方案2】：

如果是冒泡问题，那么文档末尾的以下脚本<head>可以解决它。

<script>
$(window).on('load', function() {
    $(".buttonLRG").on('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        location.href = $(this).attr('href');
    });
});
</script>

或者，可能

<script>
$(window).on('load', function() {
    $("div.tabs").on('click', ".buttonLRG", function(e){
        e.preventDefault();
        location.href = $(this).attr('href');
    });
});
</script>

或：

<script>
$(function() {
    $(document).on('click', ".buttonLRG", function(e) {
        e.preventDefault();
        location.href = $(this).attr('href');
    });
});
</script>

或：

<script>
$(function() {
    $(document).on('click', 'section[role="tabpanel"]', function(e) {
        alert("at least we're handling the click");
        e.preventDefault();
        var $button = $(".buttonLRG").filter(":visible");
        location.href = $button.attr('href');
    });
});
</script>

【讨论】：

这是因为内容与链接重叠。这并不能解决它，因为由于重叠，点击事件无法触发。
我刚试过了，没用！谢谢你试图帮助我，我真的很感激。
啊哈，所以这是一个覆盖问题，不是冒泡？
@Beetroot-Beetroot 据我所知。

【解决方案3】：

在您的可下载示例中，问题似乎是元素在当前显示的内容“下方”移动，但仍会阻止嵌入内容区域内的交互。

在“官方”演示页面上，也可以注意到问题，但他们巧妙地设置了第一个选项卡的格式，使其不会与下面的图像重叠。

编辑： 测试现场网站我发现将.js .tabs > section 选择器的visibility: hidden; 更改为display: none; 并将.tabs > section[aria-expanded="true"]selector 的visibility: visible; 更改为display: block; 解决了这个问题。你可以试试。看起来“冒泡”问题可能会起作用，因此请同时尝试这个和另一个答案。

【讨论】：

啊，可悲的是，这在现场无法正常工作。它正在“嵌套实例”选项卡中停止容器，包装正确的图像高度。该死！怎么没有人注意到插件有这个问题？！ PS再次谢谢你！
很高兴为您提供帮助。你真的应该通知开发者。
正如我所说，我有，但我猜他还没有回复我，因为现在是假期。可悲的是，我有最后期限。我很乐意为某人支付££来解决这个问题，但不知道谁能提供帮助！
@Aaron 你能从现场网站内容创建一个 zip 吗？
这是一个 Wordpress 网站，所以这几乎是不可能的！我试过了，它就在这里：dl.dropbox.com/u/10452828/LRG-International.zip 由于响应式的东西，它在更大的宽度上都搞砸了（我认为）但是如果你将窗口的大小调整到 900px，让它变成手风琴，你可以重新创建问题并查看链接没有点击通过。 dl.dropbox.com/u/10452828/LRG-International.zip