当 Jquery hide() 和 show() 用于包含 div 时，div 内的链接不可点击

Question

我的页面上 div 内的链接有问题。目前，当点击链接时，没有任何反应。我不明白为什么，但我想这与在包含的 div 上使用 hide() 和 show() 有关，我将在下面解释。

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 手风琴（）方法而不做很多为自己做额外的工作。

那么，鉴于下面的示例代码，任何人都可以帮助我理解这里的问题是什么，或者如何克服它？

<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();
  });

谢谢，

玫瑰

Answer 1

我遇到了链接不可点击的问题，我偶然发现了这篇文章并试图找到答案。问题是，在我的标题下方的 div 元素上触发 jquery hide() 后，我的标题中的链接不可点击。我将代码更改为 slideUp() 而不是 hide() 并且链接是可点击的。我不确定这是否能解决你在这篇文章中指定的问题，但鉴于它是相关的，我想我会分享它，因为它可能会帮助遇到这篇文章的任何人。它不像 .hide() 那样合适，而是一个可用的解决方法。

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

Answer 2

似乎我第一次误解了你。

如果 google 链接没有触发，那么要么是有东西阻止了链接，覆盖了链接的 href，或者甚至有另一个元素在它前面，你不能点击链接。

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

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

如果您想检查是否是这种情况，您可以尝试取消绑定所有内容，然后检查您是否可以点击链接：

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

同时检查您的 html 输出以查看 href 值设置为什么，也许有人已经覆盖了它。

只需转到呈现的页面并右键单击并选择查看源。搜索 google 链接并检查 href 值。

​

Answer 3

您为什么使用#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();
  });
})

​