Выпадающий блок прикрывает ссылку на странице. Как исправить?

Question

[evgeny_ryabcev]

Добрый день! На сайте есть выпадающий блок с контактами.
Для начала зайдите на данный сайт и наведите на новость (первая справа). Все работает окей.
Теперь дважды нажмите на иконку сообщения (появится и пропадет блок), но уже он закрывает новость на которую вы наводили (попробуйте навести на нее еще раз (ничего не реагирует)).

Как решить данную проблему?

JS:

$(document).ready(function(){
    $("#contacts").toggle(
    function() {

        $("#block").removeClass("animated fadeOutDown");

        $("#block").addClass("animated fadeInDown").show();
    },
    function() {

    	$("#block").addClass("animated fadeOutDown");
    });
});

HTML:

<div id="contacts" class="mailto"></div>
<div id="block" class="blockA" style="display:none;">
	<span class="phone-icon">
	[e-mail]
	</span>
</div>

CSS:

.blockA{
	z-index: 1000;
background: #fff;
border:1px solid #ada2a2;
position: absolute;
top:86px; right:40px;
width:400px; height: 250px;
box-shadow: 0 .5em 2em rgba(0,0,0,0.5);
}

Answer 1

[Юрий Лобанов]

jsfiddle.net/iiil/y3fem/19
Так будет корректно работать при многократных кликах.

Answer 2

[Юрий Лобанов]

Начнем с того, что вот так это выглядит в ff
Я сначала вообще не мог понять, куда там наводить, за что вам отдельное "спасибо".
Понимаю, Вы никак не могли подумать, что кто-то в наше-то время может пользоваться таким старьем, как ff27.
Ничего удивительного в этом нет, у Вас блок с контактами перекрывает картинку. Решить это можно обычным добавлением display:none для него. Что касается Вашей хитрой реализации - Вы мне еще в своем предыдущем вопросе не ответили, почему Вы делаете так.
Зато еще в одном вопросе Вы собирались поработать на twitter или dropbox.

Comments

[evgeny_ryabcev]

@iiil , по умолчанию у блока display:none; После появления и исчезновения он не возвращается в состояние - умолчания и закрывает блок. Если код JS $(document).ready(function(){
$("#contacts").toggle(
function() {

$("#block").removeClass("animated fadeOutDown");

$("#block").addClass("animated fadeInDown").show();
},
function() {

$("#block").addClass("animated fadeOutDown");
});
});

изменить так -
$(document).ready(function(){
$("#contacts").toggle(
function() {

$("#block").removeClass("animated fadeOutDown").css("display","none");

$("#block").addClass("animated fadeInDown").show();
},
function() {

$("#block").addClass("animated fadeOutDown");
});
});

Блок исчезает не плавно и получается зря подключен fadeOutDown.

Почему я так реализовываю? Потому что здесь мне именно так и посоветовали.

А что насчет dropbox и twitter. Если я спрашивал, то это не значит, что я уже готов создавать что-то для них. А узнавал, "так", для себя.

[Юрий Лобанов]

@evgeny_ryabcev естественно, что display: none будет моментально работать ) ну если Вы отказываетесь слушать здравые возражения против Вашей реализации, то нагородите еще либо setTimeout для display:none, либо его же для z-index. Но лучше сделайте как у людей, для начала постарайтесь понять, что делаете.
И замечание про ff - не для красного словца.

[evgeny_ryabcev]

@iiil , так я и прошу подсказать, как это сделать правильно, потому-что понял, что до этого советовали не верно. Всегда готов рассмотреть здравую критику, но она здесь неуместна, так как знаю, что неправильно сделано и ищу ответа, а не возражения.

Answer 3

[Юрий Лобанов]

jsfiddle.net/iiil/y3fem/8
Пока удалось решить вопрос только так. Посмотрел тот пример, откуда Вы брали. Там примерно такое же решение. Красный блок имитирует блок с новостями, у него при хавер меняется фон. Можете убедиться, работает. Для Вашего случая код будет выглядеть так.

$('#contacts').click(function(){
    if ($('#block.hide').length) {
        setTimeout(function(){
            $('#block').hide()},1000);
    }
    $('#block').toggleClass('fadeInDown fadeOutDown hide').show();
});

Попробуйте, отпишитесь, работает или нет.

Comments

[evgeny_ryabcev]

@iiil , спасибо большое, что потратили время на решение данного вопроса. Но, к сожалению, код не работает корректно на моем сайте((

[evgeny_ryabcev]

@iiil , хотя полностью перенес ваш код на свой сайт и вроде все нормально. Огромное вам спасибо.

[evgeny_ryabcev]

@iiil , только вот, почему-то, при обновлении страницы, блок самовольно появляется и исчезает.

[Юрий Лобанов]

@evgeny_ryabcev в итоге работает? Если да, ответ надо отметить решением, если нет, давайте разбираться.

[Юрий Лобанов]

@evgeny_ryabcev наверное забыли классу block прописать display:none

[evgeny_ryabcev]

@iiil , разобрался. Работает нормально, только вот если несколько раз быстро кликнуть - глючит.

[Юрий Лобанов]

@evgeny_ryabcev что именно глючит?

[evgeny_ryabcev]

@iiil , getravel.net понажимайте быстро на иконку сообщения

[Юрий Лобанов]

@evgeny_ryabcev написал ответ ниже. Происходит из-за таймаута.