Jquery - Как определить, скрываются ли элементы из-за переполнения: hidden;контейнер? - PullRequest
Новая
       7

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

7 голосов
/ 14 декабря 2011

У меня есть эта проблема, и я все еще на концептуальном уровне понимания, как мы можем определить, находится ли данный элемент вне контейнера (контейнер с переполнением: скрыто; свойство объявлено);

Вотконтекст того, что мы хотим:

Давайте представим, что мы наведем курсор мыши на элемент 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решение.

Ответы [ 2 ]

1 голос
/ 10 августа 2012

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

Итак, когда вы наводите курсор мыши на элемент 3, вы хотите увидеть подпункт 3.1 на уровне элемента 1?После быстрого взгляда на код этого плагина, я считаю, что вам просто нужно изменить showSuperfishUl (), строка которого заканчивается следующим образом: 

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

Предполагая, что ваши элементы и сабвуферы имеют одинаковую высоту, и заменяяВ контексте с $ (this) вы можете добавить что-то похожее на эти строки: 

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");
}

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

0 голосов
/ 11 января 2012

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

...