Как я могу раскрыть контент и сохранить его видимость при наведении на дочерний элемент? - PullRequest
Новая
       8

Как я могу раскрыть контент и сохранить его видимость при наведении на дочерний элемент?

1 голос
/ 17 ноября 2009

Я задаю вопрос, очень похожий на этот - могу ли я сказать, идентичный?

Пример в настоящее время находится в нижней навигации на этой странице .

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

В настоящее время у меня есть: 

$(document).ready(function() {  

var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');

dropdown.hide();

$(navigator).hover(function(){
    $(this).siblings(dropdown).fadeIn();
}, function(){
    setTimeout(function(){
        dropdown.fadeOut();
    }, 3000);
});
});

с соответствующим HTML-кодом (включая код ExpressionEngine - извинения): 

        <p class="older_entry"><a href="{path='blog/'}" class="paginate_link page_back">Older</a><span class="hide_me">Older entry: 
        <br />
        <a href="{path='blog/'}" class="entry_text">{title}</a></span></p>

        {/exp:weblog:next_entry} 

        <p class="blog_home"><a href="http://joshuacody.net/blog" class="paginate_link page_home">Blog Main</a><span class="hide_me">Back to the blog</span></p>

        {exp:weblog:prev_entry weblog="blog"}

        <p class="newer_entry"><a href="{path='blog/'}" class="paginate_link page_forward">Newer</a><span class="hide_me">Newer entry: 
        <br />
        <a href="{path='blog/'}" class="entry_text">{title}</a></span></p>

В данный момент ведёт себя довольно странно. Иногда он ждет три секунды, иногда - одну секунду, иногда не исчезает совсем.

По сути, я надеюсь, что при наведении на пиктограмму значков в span.hide_me (a.paginate_link) я хочу, чтобы он оставался видимым, когда пользователи наводят курсор мыши на промежуток.

Думаете, кто-нибудь может помочь мне пройти через этот процесс и точно понять, как работают таймеры и их очистка?

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

Ответы [ 3 ]

1 голос
/ 17 ноября 2009

Другая проблема с таймером в вашем коде заключается в том, что он всегда будет работать при отключении мыши. Из-за 3-секундной задержки вы можете очень хорошо запустить его снова при наведении мыши, но, поскольку таймер все еще существует, он исчезнет, ​​несмотря на то, что вы на самом деле навели указатель мыши на элемент.

Быстрое перемещение мыши вперед-назад вызовет несколько таймеров.

Попробуйте сначала заставить его работать без таймера, затем (если это действительно необходимо) добавьте дополнительную сложность с задержкой (которую вы должны отслеживать и удалять / сбрасывать в зависимости от состояния).

1 голос
/ 19 ноября 2009

Здесь был последний рабочий код для тех, кто сталкивается с этим снова. Не стесняйтесь, дайте мне знать, если бы я мог улучшить его любым способом:

$ (документ) .ready (function () {

var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');

dropdown.hide();

$(navigator).hover(function(){
    clearTimeout(emptyTimer);   
    $(this).siblings(dropdown).fadeIn();
}, function(){
    emptyTimer = setTimeout(function(){
        dropdown.fadeOut();
    }, 500);
});

$(dropdown).hover(function(){
    clearTimeout(emptyTimer);   
}, function(){
    emptyTimer = setTimeout(function(){
        dropdown.fadeOut();
    }, 500);
});
});
1 голос
/ 17 ноября 2009

Если вы просто хотите, чтобы он работал, вы можете попробовать использовать плагин всплывающей подсказки, например this .

Если вы хотите понять, как это сделать: сначала избавьтесь от таймаута и заставьте его работать без него. Разница (с точки зрения пользователя) очень мала, и это упрощает работу (разработку и отладку). После того, как вы заработаете, как хотите, верните время ожидания.

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

РЕДАКТИРОВАТЬ (согласно вашему ответу на ответ stefpet)

Я понимаю, что вы действительно хотите, чтобы раскрывающийся список исчезал, если мышь перемещается из навигатора, ЕСЛИ она не перемещается в само раскрывающееся меню. Это немного усложняет, но вот как это можно сделать: для обоих типов событий указателя мыши вы устанавливаете таймер, который вызывает функцию, которая скрывает раскрывающийся список. Допустим, таймер составляет 1 секунду. для обоих типов элементов, даже при наведении мыши, вы очищаете этот таймер (см. страницу w3school по времени для синтаксиса и т. д.). Кроме того, при наведении мыши на навигаторе вы должны показать раскрывающийся список.

...