4

当 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 crash 工作机制的解决方案。这是确定元素可见性问题的一般解决方案，该元素位于溢出：隐藏元素的子元素的溢出部分中。我觉得最好将其与引发此问题的具体问题联系起来，但如果当前问题将被视为令人困惑，我愿意相应地对其进行修改。我希望这次更新就足够了。

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

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

4

3 回答 3

5

选择器的 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 中，我认为这现在可以工作。

于 2012-08-28T17:53:31.043 回答
1

把这张支票

$('div.nav-collapse.in').length > 0 ? 'links are visible' : 'links are not visible'
于 2012-08-28T14:34:06.290 回答
0

对于任何有兴趣的人——我最终选择了一个不同的解决方案，基于 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));

我更新了一个jsfiddle，您可以在其中看到它在工作中。

于 2012-12-24T22:40:53.697 回答