Скользящее меню jQuery блокирует другой контент - PullRequest
Новая
       18

Скользящее меню jQuery блокирует другой контент

2 голосов
/ 02 октября 2011

Мое рабочее меню (с незначительной проблемой) ...

У меня есть система меню с выдвижными ящиками, которой я пользуюсь уже довольно давно.Он использует изображения ролловеров, и эта рабочая jsFiddle (# 1) ниже прекрасно демонстрирует только соответствующую операцию со статическими div вместо ролловеров изображений.

Моя система использует контейнер div с overflow:hidden; и ящиком div внутри каждого.Когда анимация jQuery перемещает ящик за пределы контейнера, он автоматически скрывается.Различные другие методы используются для остановки анимации, когда вы перемещаете мышь из ящика обратно в меню, чтобы предотвратить преждевременное закрытие ящика.

В эту систему было вложено много времени и усилий благодаряпомощь сообщества SO.Это послужило мне хорошо, но теперь ящики меню содержат намного больше контента.Ящики большего / длинного размера выявили эту новую проблему, как я опишу ниже.

Просто для демонстрации я обрисовал контейнеры, чтобы показать их позиции, и замедлил анимацию.Окончательный проект быстрее и не имеет этих контуров.

# 1 - http://jsfiddle.net/PayFw/143/

Как вы можете видеть, когда контент (например, ссылка), требующий взаимодействия, отстает или частично заблокированпо этим контейнерам ссылка не кликабельна, так как она закрыта.Эта проблема видна в Mozilla и Webkit, но не в IE-8.(В этом случае я думаю, что IE работает не так, как ожидалось.) Я не тестировал другие версии.

Игра с z-index не является решением, потому что это только заставляет ящики скользить за контентом.Очевидно, я хочу, чтобы ящики скользили по содержимому во время использования.

То, что я пытался ...

Различные решения для небольшихпроблема выше только, кажется, приводит к более сложным проблемам.

Я думал, что это будет просто ... просто измените, чтобы сделать контейнеры невидимыми с visibility:hidden;Затем при наведении курсора, чтобы вызвать выдвижной ящик, измените значение на visibility:visible; и обратно на visibility:hidden; после закрытия ящика.Даже с дополнительным усложнением анимации это делается с помощью обратного вызова, чтобы завершить закрывающую анимацию перед тем, как снова сделать контейнер невидимым.

Это работает очень хорошо, когда вы входите в пункт меню «чисто» («чисто "определено: сверху / снизу, не касаясь соседних пунктов меню).

Однако это решение создало совершенно новую проблему.Когда вы переходите от одного пункта меню к другому, анимация jQuery stop() мешает открытию следующего меню и закрывает его, пока вы все еще зависаете.И это делает функцию обратного вызова ненадежной .... иногда, как вы можете видеть по серому контуру, контейнер остается видимым, что наносит ущерб всей цели этого решения.

# 2 - http://jsfiddle.net/PayFw/144/

Вопросы:

  1. Есть ли другой способ запретить system # 1 постоянное блокирование содержимого, даже когда выдвижные ящикизакрыто?

  2. Если нет, есть ли способ исправить проблемы с версия # 2 ?то есть - получить видимость контейнера для правильного переключения с анимацией выдвижного ящика, сохраняя при этом ту же чистую / надежную операцию, что и в версия # 1 .

  3. Если нет простогоили практическое решение, есть ли плагин jQuery, который может быть легко интегрирован с моей системой?Если да, то какой и как?Я знаю, что существует множество систем выдвижных ящиков меню jQuery, но мне нужно что-то, что может просто разместить настраиваемые выдвижные ящики под моими уже существующими ролловерами изображений (без блокировки возможности щелчка любого содержимого, которое может попасть в ящики).зона действия).

РЕДАКТИРОВАТЬ:

Относительно ответа, отправленного vzwick : Его решение простое и блестящее, но требует дальнейшего объяснения.Его заявление об использовании display:none; & display:block; вместо visibility:hidden; & visibility:visible; является лишь частью истории.

Я использовал visibility:hidden; в контейнерах .

Вместо этого я должен был использовать display:none; на выдвижных ящиках .

Почему?

При переключении visibility:hidden;, Контейнер остается в потоке контента.Контейнеры находятся в потоке и имеют автоматический размер, который определяется размером выдвижного ящика.

При переключении display:none; выдвижной ящик удаляется из потока содержимого.Удалив ящик из потока, его контейнер станет нулевого размера.Таким образом, хотя контейнеры все еще находятся в потоке контента, они свернуты, имеют нулевой размер, больше не влияют на содержимое страницы и, следовательно, больше не нужно делать их невидимыми.

http://jsfiddle.net/PayFw/146/

Brilliant.Благодаря vzwick .

1 Ответ

1 голос
/ 02 октября 2011

Ваша проблема легко решается с помощью display: block и display: none соответственно: 

$('div[id|="m"]').each(function (i) {

    $(this).hover(enter, leave);

    $ht[i] = ($('#menu-'+i).height());
    $('#menu-'+i).css({
        'top': '-'+$ht[i]+'px',
        'display': 'none' // <--- changed
    });

});

function enter() { 
     j = $(this).attr('id').replace(/m-/, "");
     $('#menu-'+j).data({closing: false}).stop(true, false).animate({top: '0'},800).css({'display' : 'block'}); // <--- changed
};

function leave() { 
     $('#menu-'+j).data({closing: true}).delay(100).animate({top: '-'+$ht[j]+'px'},800, function(){ $(this).css({'display' : 'none'}) }); // <--- changed
};

См. эту скрипку для рабочего примера.

Редактировать

Для уточнения:

Установка свойства visibility на hidden - это просто еще один способ сказать opacity:0. Элемент по-прежнему сохраняет свои размеры и положение в блочной модели. В вашем случае это означает, что он перекрывает другой контент.

Свойство display, напротив, при значении none полностью удаляет элемент из блочной модели / потока.

...