JQuery - как определить, скрываются ли элементы при переполнении: hidden; контейнер?

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 

Для этого, возможно, мы должны определить, находится ли элемент вне потока, и, это он, нажимать все на X px;

Если это хороший подход, чтобы решить эту проблему, как мы можем определить, есть ли элемент из потока?

Если это нехороший подход, можете ли вы предложить другой?

ps- мы используем суперфиш в качестве меню меню jquery.

Answer 1

Если вы просто хотите, чтобы отобразить все, как вы описали вы можете сделать это с помощью CSS с position:relative и align:bottom или position:absolute с bottom:?px однако вы бы тогда не придется беспокоиться о том, собирается далеко вверх.

Answer 2

У меня может быть быстрое решение jQuery, ваш вопрос будет помечен таким образом, если вам нужно чистое решение для CSS или я взял неверный плагин, мы можем подумать о чем-то другом ... Никогда не использовал суперфиша сам, но я проверил пример «вертикального стиля» с этого сайта: http://users.tpg.com.au/j_birch/plugins/superfish/

Итак, когда вы наведите курсор на пункт 3, вы хотите увидеть под 3.1 на уровне предмета 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"); 
} 

вы должны были бы установить реальную страницу, чтобы узнать, работает ли он в реальном контексте ... «верх», вероятно, не работайте с этим relative/float: left layout, но на вашем «концептуальном уровне» это почти что.