Создайте Jquery Drop down, используя Divs и поддерживая двойное наведение - PullRequest
Новая
       17

Создайте Jquery Drop down, используя Divs и поддерживая двойное наведение

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

То, что я пытаюсь сделать, это исчезнуть в div, перевернув ссылку. Когда вы наведете указатель мыши на ссылку, вы сможете навести курсор мыши на элемент div, который только что появился, и щелкнуть ссылки внутри элемента div.

В настоящее время у меня есть четыре ссылки, и у каждой есть div с ссылками и изображениями. При наведении ссылки div исчезает под ссылкой, затем вы можете навести курсор мыши на div и использовать внутри картинки и ссылки. При развертывании ссылки или элемента div он должен исчезнуть. Кроме того, если вы переместите указатель мыши на другую главную навигационную ссылку, она должна исчезнуть с предыдущей и исчезнуть в новом div.

Проблема заключается в том, что предыдущий DIV иногда не исчезает, если вы быстро переходите к следующей ссылке. Я рисую пробел, есть идеи?

Проблема решена, ответ здесь: http://jsfiddle.net/UkneJ/3/

Это то, с чем я работаю: http://jsfiddle.net/DemhU/17/

$('#div1, #div2, #div3, #div4').hide();

var is_over;

var hide_dropnav = function(a) {
    setTimeout(function() {
        if (is_over) {
            return;
        } else {
            var a_name = $(a).attr('data-name');

            $('#' + a_name).fadeTo(250, 0);

            $('#nav li a').removeClass('active');
        }
    }, 10);
}

$('#nav li a').hover(function() {

    var elem_name = $(this).attr('data-name');

    $('#' + elem_name).stop(true,true).fadeTo(150, 1);

    is_over = true;

    $('#nav li a').removeClass('active');
    $(this).addClass('active');

    var that = this;
    hide_dropnav(that);

}, function(){
    is_over = false;
    hide_dropnav(this);
});

$('#div1, #div2, #div3, #div4').hover(function() {
    is_over = true;
}, function() {
    is_over = false;
});

Ответы [ 2 ]

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

возможно без JavaScript: http://jsfiddle.net/XENww/

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

Есть много способов сделать это, но я собрал быстрый рабочий пример метода, который я использовал ранее:

http://jsfiddle.net/UkneJ/

В этом примере япривязываю оба к A и DIV, и использую небольшую задержку, чтобы проверить, является ли какой-либо элемент завис?state.

Вы также можете просто привязать курсор к LI, который упрощает работу.Это работает, только если ваша ссылка и ваш div содержатся в каждом LI, но:

http://jsfiddle.net/UkneJ/1/

...