jQuery: Как отключить .hover, когда конкретный div открывается с помощью .click? - PullRequest
Новая
       25

jQuery: Как отключить .hover, когда конкретный div открывается с помощью .click?

0 голосов
/ 13 декабря 2011

У меня есть следующий код: http://jsfiddle.net/jhacks/xCcdn/. Если вы пойдете на скрипку, вам будет легче увидеть, что у меня происходит. Но по сути, у меня есть ряд значков ("topIcon"), каждый из которых при наведении курсора показывает div. При нажатии другого элемента div («topIconNew») всплывающая подсказка расширяется, и раскрывающийся список скользит вниз.

При наличии раскрывающегося меню. Hover не работает должным образом. При наведении курсора на любой другой «topIcon» div выскакивает, но никогда не исчезает, даже после отключения мыши. Я не могу исправить вещи, не сломав их. Я пытаюсь:

  1. Получите "topIcon". Однако, чтобы быть отключенным, в то время как раскрывающийся список присутствует. У меня на странице будут другие подсказки jQuery, которые я хочу по-прежнему работать, поэтому я также хочу знать:

  2. Как заставить .Hover вести себя правильно, когда выпадающий список присутствует. Я не уверен, где я иду туда не так.

Вот jQuery: 

$(document).ready(function() {

var clicked = false;
// tooltip hover
$("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover(
function(){$(this).children("div.topTip").show();},
function(){
    if(!clicked) {
        $(this).children("div.topTip").hide();
        $(this).children('div.topTip').hide();
    }
}
);        

//tooltip widening and dropdown menu

$("div.topIconNew").click(function(){
//permanent tooltip
$(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555");
$(this).siblings("div.topTip").show();    
$(this).siblings("div.topTip").animate({width:320,marginLeft:-220},"fast");
$(this).siblings("div.topDrop").slideDown(240);
clicked = true;
});

$("div.wrapper").click(function(){
//hide dropdown (hide simultaneously)
$(this).parent("div.topIcon, div#topSend, div#topTool").css("background-    color","#444444");
$(this).children("div.topDrop, div.topTip").hide();
});

});

Вот HTML: 

<div class="topIcon">

<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">Hi</div>
</div>
<div class="topDrop">How are you?</div>

</div>  

<div class="topIcon">

<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">Hey</div>
</div>
<div class="topDrop">What's up</div>

</div>

Я не думаю, что CSS является виновником здесь, поэтому не буду тратить место на вставку, но вы можете просмотреть его в скрипке.

Любая помощь приветствуется, потому что я в тупике. Спасибо!

...