Нужно поправить скрипт - ToolTip
Есть функция, которая при нажатии на ссылку "#download", выводит под ссылку блок ".downloadBox" (точнее блок всплывает).
HTML-код: <a href="#" id="download">Отобразить инфо</a> <div class="downloadBox"> <p>Название файла - 100 МБ <span>(Скачано - 313раз(а), загружено - 31.01.2012)</span></p> <p class="bitrate"> <span>Аудио - параметры аудио</span> <span>Видео - параметры видео</span> </p> <p><a href="/files/archive-002.zip">Скачать</a></p> </div> Код JQuery: $(function() { $('.links').each(function () { var distance = 0; var time = 400; var hideDelay = 200; var hideDelayTimer = null; var beingShown = false; var shown = false; var trigger = $('#download', this); var info = $('.downloadBox', this).css('opacity', 0); $([trigger.get(0), info.get(0)]).toggle(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); if (beingShown || shown) { // don't trigger the animation again return; } else { // reset position of info box beingShown = true; info.css({ top: -5, left: 0, display: 'block' }).animate({ top: 25, opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); } return false; }, function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); hideDelayTimer = setTimeout(function () { hideDelayTimer = null; info.animate({ top: -5, opacity: 0 }, time, 'swing', function () { shown = false; info.css('display', 'none'); }); }, hideDelay); return false; }); }); }); Скрипт работает прекрасно, только есть один минус. Этот минус заключается в том, что при нажатии любую область блока ".downloadBox" (который, всплывает после клика по ссылке "#download"), этот блок (".downloadBox") исчезает. Проблема в том, что в этом блоке, есть ещё одна ссылка, с названием "Скачать" (можете посмотреть в коде, который представлен выше), и эта ссылка "Скачать" не работает... Кликаешь по ней, а она не функционирует, напротив блок (".downloadBox), исчезает. Как поправить код, чтобы при нажатии на блок ".downloadBox" или при нажатии на элементы, которые находятся в нем, не исчезал блок ".downloadBox"? То есть нужно, чтобы ссылка "Скачать", в блоке ".downloadBox", функционировала, и при этом не исчезал основной блок. Что нужно убрать или добавить или изменить в коде JQuery? |
Ну как то так:
$(function() { $('.links').each(function () { var distance = 0; var time = 400; var hideDelay = 200; var hideDelayTimer = null; var beingShown = false; var shown = false; var trigger = $('#download', this); var info = $('.downloadBox', this).css('opacity', 0); $([trigger.get(0), info.get(0)]).show(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); if (beingShown || shown) { // don't trigger the animation again return; } else { // reset position of info box beingShown = true; info.css({ top: -5, left: 0, display: 'block' }).animate({ top: 25, opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); } return false; }); $('#close').hide(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); hideDelayTimer = setTimeout(function () { hideDelayTimer = null; info.animate({ top: -5, opacity: 0 }, time, 'swing', function () { shown = false; info.css('display', 'none'); }); }, hideDelay); return false; }); }); }); Поставь кнопку в блоке (например) "Закрыть" с id #close. Должно работать. Не проверял! |
atlantis,
Спасибо, за то, что ответили. Но ваш код не работает, даже блок не всплывает. |
Поменяйте этот код
$([trigger.get(0), info.get(0)]) на этот $(trigger) Это заставит реагировать на клики (показывать\скрывать) только надпись "Отобразить инфо" |
melky,
УРААА!!! Спасибо большое! Целых 3 дня мучился! |
Возникла новая проблема, помогите пожалуйста.
Суть в том, что у меня появилась ещё одна кнопка типа "#download" это "#torrent". При нажатии на "#torrent" нужно, чтобы всплывал блок ".torrentBox". И ещё проверочку не плохо были бы сделать, если при нажатии на ссылку "#torrent", проверялся открыт ли ".downloadBox", если да, то закрыть и открыть ".torrentBox". Помогите пожалуйста, изменил код таким образом, обе ссылки не функционируют: var trigger = $('#download', '#torrent', this); var info = $('.downloadBox', '.torrentBox', this).css('opacity', 0); |
Может кто помочь???? Что нужно, описал в сообщении выше
|
Попробуй так:
var trigger = $('#download,#torrent', this); var info = $('.downloadBox,.torrentBox', this).css('opacity', 0); Хотя на врятли... :) |
atlantis,
пробовал, тоже не вышло. |
Часовой пояс GMT +3, время: 07:04. |