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

Question

我在检测Twitter引导响应导航栏中导航链接在崩溃状态时的可见性时遇到问题.

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

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

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

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

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

重要更新 我正在寻找一种独立于twitter bootstrap崩溃工作原理的解决方案.这是确定溢出的子元素溢出部分中元素可见性的问题的一般解决方案:隐藏元素.我觉得把这个问题与提出这个问题的具体问题联系起来会更好,但如果当前的问题会被视为混乱,我愿意相应地修改它.我希望这次更新已经足够了.

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

这是一个显示检查的小提琴:崩溃时可见返回 true- http://jsfiddle.net/VDR3Y/

Answer 1

选择器的jQuery实现: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中,我认为这将适用于此.