jquery - 如何使用 jQuery 或 vanilla JS 检测链接是否隐藏在折叠的 Twitter Bootstrap 导航栏中

Question

当 Twitter Bootstrap 响应式导航栏中处于折叠状态时，我在检测导航链接的可见性时遇到问题。

问题的根源在于 .collapsed div 设置了溢出:隐藏规则。这意味着虽然导航 ul 的尺寸非零，但它仍然是隐藏的，因为 .collapse 容器的高度为零(在关闭状态下在 style 属性中设置)。

问题是，如果 #some-nav-link 是 .nav ul 中的 li 项之一，它将与 $('#some-nav-link :visible') 匹配，因为它不知道该元素因溢出而被隐藏。

是否有一种万无一失的方法来检查可以解释此问题的元素的可见性？

我尝试使用 li $.fn.offset() 方法依赖 elementFromPoint，但在 li 有一些填充的情况下，它不够好，例如，在这种情况下，elementFromPoint 返回 的父级之一li。

注意 - 我的代码是相关网站上的第三方代码，因此我无法更改导航栏的工作方式。

重要更新我正在寻找一种独立于 Twitter Bootstrap 崩溃工作机制的解决方案。这是确定位于 Overflow:hidden 元素的子元素的溢出部分中的元素的可见性问题的通用解决方案。我觉得最好将其与引发此问题的具体问题联系起来，但如果当前的问题被认为令人困惑，我愿意对其进行相应的修改。我希望这次更新就足够了。

感谢您的阅读，我期待一些聪明的解决方案!

这是一个 fiddle ，显示了对 :visible 的检查:折叠时返回 true - http://jsfiddle.net/VDR3Y/

Answer 1

选择器 :visible 的 jQuery 实现要求在任何祖先中将 height 和 width 设置为 0，以便失败。否则你的原始代码就会起作用。

据我所知，没有选择器可以直接执行此操作，因此可能需要自定义函数:

(function () {

  function isCollapsed(element) {
    var $e = $(element);

    return $e.width()*$e.height() === 0;
  }

  $.fn.isReallyVisible = function () {
    var $this = $(this).filter(':visible');

    // if jQuery says its not visible, trust it, otherwise
    // check if any of the parents are collapsed
    return $this ? !$this.parents().toArray().some(isCollapsed) : false;
  };
})();

这将处理您 parent 崩溃的情况。

$('#some-nav-link').isReallyVisible();

JSFiddle

您可能需要添加更多内容来处理溢出，但由于这不在OP中，我认为这现在可以工作。