使用jquery hide（）和show（）时，div上的链接不可点击包含div

问题描述：

我在页面中存在一个位于div内部的链接问题。目前，当链接被点击时，什么都不会发生。我不明白为什么，但我想它与包含div的hide（）和show（）的使用有关，我将在下面解释它。使用jquery hide（）和show（）时，div上的链接不可点击包含div

DIV的是定制的“手风琴”，它采用以下jQuery来打开/关闭适当的div的一部分被点击的标题时：

$('.accordion .head').click(function() { 
    $('.accordion .head').next().hide(); 
    $('.accordion .head').removeClass("active"); 

    $(this).next().show('fast'); 
    $(this).addClass("active"); 
    return false; 
});

据我所知，有更好的方法来实现“手风琴“的行为，但是因为这是在我们的网站上使用的，所以我没有更新手风琴的使用实际的Jquery accordion（）方法而没有为我自己做很多额外的工作的选项。

因此，考虑到如下的示例代码任何人可以帮助我了解的问题是在这里什么，或者如何克服呢？

<div class="accordion"> 
    <div class="head active"><a href="#">Heading 1</a></div> 
    <div class="accordion-content first"> 
     <p> 
      Some text here 
     </p> 
     <div class="accordion-logos"> 
     </div> 
    </div>    
    <div class="head"><a href="#">Heading 2</a></div> 
    <div class="accordion-content"> 
     <p> 
      Some other text here 
     </p> 
     <p> 
      <a href="http://www.google.com">http://www.google.com</a>          
     </p> 
    </div>    
</div>

我甚至无法获得的点击，当我处理它专门登记，在代码中的警报之下永远不会触发时，链接被点击：

$('.accordion .accordion-content #thelink').click(function() { 
    alert(); 
    });

谢谢你，

玫瑰

[此的jsfiddle示例]（http://jsfiddle.net/DrS5f/）与代码您提供不到风度块从发射谷歌的链接，导致我相信一定会有一些其他的JavaScript劫持点击事件比你提供 – 2012-08-15 15:49:59

嗨西蒙，感谢您的帮助。我查看了JSFiddle的例子，我可以看到你是对的，链接应该工作，除非有其他的JavaScript阻止。我将不得不关闭一个脚本，直到我能找出原因。感谢您花时间看这个！ – 2012-08-15 16:19:32

@LRose：我编辑了我的答案，现在我正确地理解了这个问题，并提供了一些关于如何查明可能出错的建议。 – Nope 2012-08-15 16:25:24

答

好像我身边误解你的第一次。

如果谷歌链接不火，那么有两种东西挡住一个环节，覆盖链接的href或者甚至另一个因素是在它的面前，你不能点击链接。

如果有人想阻止链接到工作，他们可以做这样的事情：

$('.accordion .accordion-content a').click(function(){ 
    return false; 
});

如果您要检查，如果这是你可以尝试解除绑定的一切，请检查您是否可以点击链接的情况下然后：

$('.accordion .accordion-content a').unbind('click');

还要检查你的HTML输出，看看有什么href值设置为，也许有人已经覆盖它。

只需进入渲染页面，右键单击并选择view-source。搜索谷歌链接并检查href值。

嗨，弗朗索瓦，你是正确的，在我发布之前，我不小心删除了链接上的id。我尝试了你提供的两个选项，即使它显然应该基于你提供的演示工作，但我仍然没有在实际页面上得到警报。我真的开始认为页面上的另一个脚本在这里引起问题。非常感谢您阅读本文！ – 2012-08-15 16:23:09

@LRose：我现在更新了我的答案。我最初误解了你的问题。我添加了一些关于如何帮助您排除链接不会让您点击它的问题的建议。我假设我们正在谈论你无法获得谷歌链接火:) – Nope 2012-08-15 16:26:23

嗨弗朗索瓦，再次感谢您的帮助，这是如此神秘！我尝试了您提供的第二个片段，但该链接仍然无法点击，我还查看了呈现的页面内容，并且href值已完成。我认为你可能有一些你提到的页面上的另一个元素可能会阻止链接被点击。我将不得不挖掘页面上所有元素的CSS，看看是否有什么可以做到这一点。再次感谢您的帮助！ – 2012-08-15 17:10:18

答

为什么使用#thelink？如果我只用a替换它就行。

$(function(){ 
    $('.accordion .head').click(function() { 
    $('.accordion .head').next().hide(); 
    $('.accordion .head').removeClass("active"); 

    $(this).next().show('fast'); 
    $(this).addClass("active"); 
    return false; 
    }); 

    $('.accordion .accordion-content a').click(function() { 
    alert(); 
    }); 
})

嗨EH_warch，我只使用一个ID，因为我已经测试过选择div中的任何链接。我相信这会比使用特定的id更好，因为我可以自定义该函数以适用于任何链接。感谢您审查我的问题！ – 2012-08-15 16:26:14

well ID对于页面来说是独一无二的，所以你不需要使用'class id'类型的选择器。我建议你使用锚选择器，因为你的HTML上没有id – 2012-08-15 17:13:56

答

我是有无法点击链接的问题，我碰到这个职位后来试图找到答案。问题是，在我的头下面的div元素上触发了jquery hide（）后，我的头中的链接无法点击。我将代码更改为slideUp（）而不是hide（），链接可点击。我不确定这是否解决了您在本文中指定的问题，但是看到它是相关的，我认为我会分享它，因为它可能会帮助任何遇到此帖的人。它不如.hide（）适合，但是可用的解决方法。

$('#mydiv').slideUp();

使用jquery hide（）和show（）时，div上的链接不可点击包含div

相关推荐