Jquery - 요소가 오버플로에 의해 숨겨 지는지 감지하는 방법 : 숨김; 컨테이너?

Question

필자는이 문제가 있으며 아직 개념적 수준의 이해를하고 있습니다. 주어진 요소가 컨테이너 외부에 있는지 (오버플로 된 컨테이너 : 숨김, 속성이 선언 된 경우) 어떻게 감지 할 수 있습니까? 여기

는 우리가 원하는 것을의 문맥의 :

하자의 이미지를 우리는 마우스 호버 항목 3 :

우리가 일반적으로 가지고 : 이것처럼

item 1 
item 2 
item 3 - sub 3.1 
     - sub 3.2 

, 하위 3.2이 나올 것입니다 오버 플로우 대신 컨테이너에 clearfix를 사용하면 다른 페이지 내용 위로 드롭 다운됩니다),이를 해결하기 위해 우리는 이것이 더 나은 해결책이라고 생각합니다. 마우스를 가리 키면 항목 3 :

item 1 
item 2 - sub 3.1 
item 3 - sub 3.2 

이 작업을 수행하려면 요소가 흐름에서 벗어난 것을 감지하고 모든 요소를 ​​Xpx 위로 밀어 넣어야합니다.

이 문제를 해결하는 좋은 방법이라면, 흐름에서 벗어난 요소를 어떻게 발견 할 수 있습니까?

좋은 접근 방법이 아니면 다른 것을 제안 해주세요.

ps- 우리는 jquery 메뉴 솔루션으로 superfish를 사용하고 있습니다.

Answer 1

당신은 단순히 모든 것을 표시 할 경우 기술 한대로 bottom:?px와 position:relative 및 align:bottom 또는 position:absolute와 CSS를 사용하면 다음 멀리까지가는 것들에 대해 걱정해야하지만 그렇게 할 수 있습니다.

Answer 2

순수한 CSS 솔루션이 필요하거나 잘못된 플러그인을 사용하면 빠른 방법으로 태그를 붙일 수 있습니다. 직접 superfish를 사용하지 않았지만 체크 아웃했습니다. 이 사이트의 "세로 스타일"예제 : http://users.tpg.com.au/j_birch/plugins/superfish/

그래서 항목 3을 마우스로 가리키면 항목 1의 레벨에서 3.1이라는 하위 항목을 보시겠습니까? 이 플러그인의 코드로 빠른 모습을 촬영 한 후 나는 이런 식으로 끝나는 라인이 그) 당신은 단순히 showSuperfishUl을 (수정해야 믿습니다 항목 및 잠수정이 같은 높이 가정

.find('>ul:hidden').css('visibility','visible'); 

을하고 상황에 맞는 교체 $ (이)와 함께, 당신은이 라인에 비슷한 일을 추가 할 수 있습니다

if($(this).parent().nextAll().length < $(this).children("li").length) // lower space < subs heights ? 
{ 
    var totalHeight=0; 
    $(this).parent().prevAll().each(function(index) 
    { 
     if(index < $(this).children("li").length) // without this you would have all subs at the level of item 1 
     { 
      totalHeight += $(this).outerHeight(true); // true for margins 
     } 
    }); 
    ... .css("top","-"+totalHeight+"px"); 
} 

그것이 실제 상황에서 작동하는 경우 당신은 알아 설정에 실제 페이지를 필요 ... "정상"아마하지 않습니다 이 상대/float : left 레이아웃을 사용하지만 거의 개념적 수준 인 "개념 수준"에서 작업하십시오.