Как заставить выпадающее меню исчезать через некоторое время JavaScript

Question

Как заставить выпадающее меню исчезать через некоторое время JavaScript

0

У меня есть боковое меню, которое падает, когда вы наводите курсор на раздел 1 в теге. Я хочу знать, как получить код JavaScript, чтобы повторить его, чтобы проверить, в каком состоянии этот список снова заходит через определенное количество времени, чтобы меню закрылось. Кто-нибудь может мне помочь, пожалуйста!

HTML

   <div class = "sidebarwrap">
    <ul>
       <li>
        <a href="#" onmouseover="toggle(this); return true;" onmouseout="timer()">Section One</a>
            <ul>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
               <li><a href="#" >link page</a></li>
            </ul>
       </li>
     </ul>
   </div>

CSS

.sidebarwrap{
    width:auto;
    height:auto;
}

.sidebarwrap ul{
    float:left;
    display:block;
    background:white;
    padding:10px;
    margin-right:30px;
    margin-left:10px;
    list-style-type:none;
    border:1px dotted #0099CC;
    border-radius:100px/10px;
}

.sidebarwrap ul ul{
    list-style-type:none;
    display:none;
    border:0px dotted #0099CC;
    border-radius:20px/60px;
}

.sidebarwrap li li{
    list-style-type:circle;
    border:0px dotted #0099CC;
    border-radius:20px/60px;
    padding:5px;
}

JavaScript

var cssNode = document.createElement('link');
cssNode.setAttribute('rel','stylesheet');
cssNode.setAttribute('type','text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head') [0].appendChild(cssNode);


function toggle(toggler) {

    if(document.getElementById){
        targetElement = toggler.nextSibling;

        if(targetElement.className == undefined){
        targetElement = toggler.nextSibling.nextSibling;
        }

        if (targetElement.style.display == "block")
        {
        targetElement.style.display = "none";
        }
        else
        {
        targetElement.style.display = "block";
        timer();
        }
    }
}

function timer(){
     var Time = setTimeout(function(){toggle(toggler)},1000);
}

user3087015 18 дек. 2013, в 00:01

Источник

Теги:

javascript

html

css

2 ответа

0

Я заметил, что в вашем коде у вас onmouseout установлен вызов call(), который создаст функцию постороннего таймаута, которая не имеет определяемого toggler. Кроме того, ваш код будет использоваться неограниченно, ~ каждые 1000 мс.

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

var Timers = {}; // create a Timers object to hold our timers.
function timer(target){
    Timers.sectionOne = setTimeout(function(){ toggle(target); }, 1000);
}

EDIT: Я бы взял это в дополнение к описанному методу @Bic, который красиво элегантен.

Metagrapher 17 дек. 2013, в 20:20

Ещё вопросы

Bic · Accepted Answer · 2013-12-17T21-56-00.000Z

Вы можете сделать это, используя метод.hover() в jQuery. Просто привяжите ссылку, когда загружается страница.

$(document).ready(function () {
    $("a").hover(function () {
       $(this).next().slideDown(); 
    },
    function () {
        $(this).next().delay(1000).slideUp();
    });
});

См. Рабочий пример: http://jsfiddle.net/WFN6q/

Вот пример работы в Vanilla JS:

<ul>
    <li>
        <a href="#" onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Section One </a>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
</ul>

Соответствующие JS:

    function showMenu(myLink) {
        myLink.nextElementSibling.style.display = 'block';
    }

    function hideMenu(myLink) {
        var ulElem = myLink.nextElementSibling;
        if (ulElement.style.display === 'block') {
            setTimeout(function () { myLink.nextElementSibling.style.display = 'none' }, 1000);
        }
    }

Хотя это работает, вы столкнетесь с проблемами при попытке щелкнуть пункты подменю, если вы не быстр. Возможно, вам понадобится добавить дополнительную логику к событию mouseout для обработки случаев, когда пользователь наводит курсор на один из пунктов подменю.
для зависания я бы порекомендовал что-то вроде hoverIntent, чтобы справиться с этим. Вы могли бы написать это сами, но почему? это небольшая библиотека, которая делает только это.
Мне нравится этот ответ, так что я собираюсь остановиться на моем коде, но я бы добавил, что вы все еще хотите настроить глобальный объект для хранения ваших таймеров, чтобы у вас не было пользователей, отключающих 4 таймера в пределах диапазона 1s.
Спасибо вам обоим за ваши ответы. Я нашел их очень полезными, я обнаружил, что этого кода достаточно, поскольку я могу добавить больше времени к функции setTimeout.
Вам не обязательно нужен глобальный объект таймера. Вы можете запретить выполнение нескольких таймеров, проверив стиль отображения перед setTimeout. Я обновил мой пример кода соответственно.