如何检测链接是否隐藏在jQuery或vanilla JS折叠的twitter引导导航栏中

Question

当twitter引导响应的导航条处于崩溃状态时，我在检测导航链接的可见性方面遇到了问题。

问题的根源在于.collapsed div有一个溢出:将隐藏的规则设置为它。这意味着尽管导航ul具有非零维，但它仍然是隐藏的，因为.collapse容器的高度为零(在关闭状态下设置为样式属性)。

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

是否有一种愚蠢的证明方法来检查元素的可见性，从而解释这一点？

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

注:我的代码是相关网站上的第三方代码，所以我不能改变导航栏的工作方式。

重要更新我正在寻找一个独立于twitter引导崩溃机制的解决方案。这是确定一个元素的可见性问题的一般解决方案，该元素位于溢出子元素的溢出部分:隐藏元素。我觉得最好把这个问题与引发这个问题的具体问题联系起来，但如果目前的问题被认为是混淆的话，我愿意相应地修改它。不过，我希望这次更新已经足够了。

谢谢你的阅读，我期待着一些聪明的解决方案！

下面是一个小提琴，它显示了检查:visible (折叠时为true )- http://jsfiddle.net/VDR3Y/

Answer 1

选择器:visible的:visible实现需要在任何祖先中将高度和宽度设置为0才能失败。否则你的原始代码就会起作用了。

AFAIK没有任何选择器可以直接完成这一任务，因此可能需要一个自定义函数：

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

这将处理你的父母崩溃的案件。

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

JSFiddle

您可能需要添加更多的内容来处理溢出，但由于这不是OP中的内容，我认为这暂时是可行的。

Answer 2

把这张支票

$('div.nav-collapse.in').length > 0 ? 'links are visible' : 'links are not visible'

Answer 3

对于任何感兴趣的人来说--我最终选择了一个不同的解决方案，基于document.elementFromPoint。

(function($) {

    function checkFromPoint(index) {
        var $e = $(this);
        var fromPoint = document.elementFromPoint($e.offset().left + $e.width() / 2, $e.offset().top + $e.height() / 2);

        return $e.get(0) == fromPoint || $e.has(fromPoint).length;
    }

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

        return $this.length ? !!$this.filter(checkFromPoint).length : false;
    };
}(jQuery));

我更新了一个小提琴，在那里你可以在工作中看到它。