Проблема с JavaScript в setTimeout - PullRequest
Новая
       4

Проблема с JavaScript в setTimeout

0 голосов
/ 19 октября 2011 
var toogleDelay = 500;
var closeTimeout = null;

$(">ul>li", $nav).hover(function () {
    var $this = $(this);
    if(closeTimeout) {
        clearTimeout(closeTimeout);
    }
    var openMenuCallback = function() {
        $this.addClass("hover");
    };
    window.setTimeout(openMenuCallback, toogleDelay);
}, function () {
    var $this = $(this);
    var closeMenuCallback = function() {
        $this.removeClass("hover");
    };
    closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay);
});

Я использую этот фрагмент, чтобы открывать и закрывать мультипадающее меню, и я хочу, чтобы меню появлялось и исчезало с задержкой 0,5 с. Я также добавил cleartimeout в часть наведения мыши функции jquery hover, чтобы меню не закрывалось, если кто-то (случайно) покинул область меню и снова входил в нее в течение 0,5 с. Это все работает нормально, но теперь у меня есть проблема, потому что есть более чем один выпадающий список, который closeTimeout позволяет сказать, что первый выпадающий список очищается, если я перемещаю мышь от первого непосредственно ко второму выпадающему, и у меня теперь есть оба раскрывающихся элемента открыты. Как мне переписать код, чтобы у каждого раскрывающегося списка был свой собственный closeTimeout, и в то же время я все еще могу очистить тайм-аут в части наведения мыши функции наведения мыши.

ТНХ суб

Ответы [ 2 ]

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

Вы можете сохранить идентификатор таймера в элементе data. Что-то вроде 

var $this = $(this);
var closeMenuCallback = function() {
    $this.removeClass("hover");
    $this.removeData("timerid");
};
var closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay);
$this.data("timerid", closeTimeout);

и затем проверьте его с помощью 

var $this = $(this);
var closeTimeout = $this.data("timerid");
if(closeTimeout) {
    clearTimeout(closeTimeout);
    $this.removeData("timerid");
}
0 голосов
/ 19 октября 2011

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

http://webdesignerwall.com/tutorials/css3-dropdown-menu

Есть несколько примеров для этого.некоторые многоуровневые некоторые нет.

...