4

折りたたまれた状態のときに、Twitterブートストラップレスポンシブナビゲーションバー内のナビゲーションリンクの可視性を検出する際に問題が発生します。

問題の根本は、.collapsed divにoverflow：hiddenルールが設定されていることです。これは、ナビゲーションulの次元がゼロ以外であっても、.collapseコンテナの高さがゼロであるため（閉じた状態でスタイル属性に設定されているため）、非表示のままであることを意味します。

問題は、＃some-nav-linkが.nav ulのliアイテムの1つである場合、要素がオーバーフローによって隠されています。

これを説明できる要素の可視性をチェックするための絶対確実な方法はありますか？

li $ .fn.offset（）メソッドを使用してelementFromPointに依存しようとしましたが、たとえばliにパディングがある場合、たとえばelementFromPointがliの親の1つを返す場合には十分ではありません。

注-私のコードは関連するウェブサイトのサードパーティコードであるため、ナビゲーションバーの動作を変更することはできません。

重要な更新 Twitterのブートストラップの崩壊がどのように機能するかという仕組みに依存しないソリューションを探しています。これは、overflow：hidden要素の子のオーバーフロー部分にある要素の可視性を決定する問題の一般的な解決策です。これを、この質問を引き起こした具体的な問題に結び付けたほうがよいと感じましたが、現在の質問が混乱していると思われる場合は、それに応じて修正することを歓迎します。ただし、この更新で十分であることを願っています。

読んでくれてありがとう、私はいくつかの賢い解決策を楽しみにしています！

これは、折りたたまれたときに：visibleが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 に答える