Mam menu, które po kliknięciu myszą nad div pokaże i po wygaśnięciu myszy zniknie. Problem polega na tym, że jeśli przewrócisz którekolwiek z dzieci z menu, menu zniknie (ponieważ technicznie, jeśli masz więcej niż jedno dziecko, to nie jesteś nad rodzicem) czy istnieje sposób, aby przewrócić dzieci liczy się jako mouseout? tutaj jest mój kod: http://jsfiddle.net/32bLg/Menu jquery unoszące się w powietrzu
Odpowiedz
Jest to bardzo prosty problem, który większość ludzi ma tendencję do nadmiernego komplikowania z zegarami i specjalnymi kontrolami przypadku. Łatwe rozwiązanie to poprzez znaczniki. Umieść oba cele najeżdżania i menu pod tym samym rodzicielskim, a następnie najedź kursorem na rodzica. Like this. Możesz również użyć wtyczki jQuery hoverIntent
, aby uniknąć fałszywych zdarzeń najechania.
Uwaga UX: animacje zanikające trwające ponad 500 ms są po prostu niegrzeczne. Proszę tego nie robić.
Oto proste rozwiązanie: http://jsfiddle.net/32bLg/16/
Podoba mi się pomysł użycia setTimeout +1. –
Sprawdź te ładne przykłady:
Konkretny wielopoziomowe jeden:
HTML z linkiem 2:
<ul id="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript</a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
CSS:
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
JS:
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
Musisz zawierać menu div wewnątrz div hover. Zobacz http://jsfiddle.net/T72jm/2/.
Zauważysz (przynajmniej w Chrome), że jeśli umieścisz kursor nad wskaźnikiem myszy i nie zrobisz nic, podział menu zniknie.
to moja poprawka
window.menushowing = false;
$('#menu').hover(
function() {
window.menushowing = true;
}, function() {
window.menushowing = false;
hideMenu();
});
function hideMenu() {
if (window.menushowing) return;
$('#menu').animate({
opacity: 0
}, 1500, function() {
$('#menu').hide();
});
}
$('#examplePic').hover(
function() {
window.menushowing = true;
$('#menu').css('display', 'block');
$('#menu').animate({
opacity: 1
}, 1500);
}, function() {
hideMenu();
});
- 1. Test jednostki Pythona w powietrzu?
- 2. Unoszące się okna systemu Android w połączeniu z FLAG_SHOW_WHEN_LOCKED nie powiodą się
- 3. Menu kontekstowe jquery wyłącz elementy menu
- 4. Używanie jQuery do sprawdzenia, czy zmieniło się menu rozwijane
- 5. Menu hamburgera z menu startowym Bootstrap nie otwiera się
- 6. Jak utworzyć kształt wielokąta w pliku KML umieszczonym w powietrzu?
- 7. Korzystanie z jQuery-menu-cel
- 8. Rozwijane menu stylu jquery-ui
- 9. jQuery Menu i ASP.NET Sitemap
- 10. Uzyskaj wartość rozwijanego menu jQuery
- 11. Wykryj, czy mysz dotyka ziemi, czy jest w powietrzu
- 12. Twitter Bootstrap 2.3.2 popover pozostać otwarte podczas unoszące
- 13. Animowane GIF na JButton, graj, gdy mysz unosi się w powietrzu
- 14. Jak sprawdzić, ile opcji znajduje się w menu rozwijanym?
- 15. Składnik menu nie wyświetla się
- 16. JQuery mobile pagelide, nowe menu facebooka
- 17. Nie można zsunąć rozwijanego menu jQuery
- 18. "odśwież" menu jquery UI po aktualizacji
- 19. Wyzwalanie menu akordeonu jquery przez zdarzenie?
- 20. Zmień kolor tła menu z jquery
- 21. JQuery UI Datepicker, odwróć kolejność roku w rozwijanym menu
- 22. menu rozwijane jQuery selected = wybrane w Safari nie działa
- 23. Menu podręczne CSS do przepełnienia/nakładania w panelach układu JQuery
- 24. Bootstrap 3: Elementy przęseł unoszące się w prawo na liście pozycji grupy nie zajmują miejsca w pionie
- 25. Ikona menu opcji Androida nie wyświetla się
- 26. Witryna powiększa się po otwarciu menu
- 27. Wykrywanie wklejenia menu kontekstowego w przeglądarce przy użyciu jquery
- 28. jQuery/JS zapobiec prawy kliknij menu w przeglądarkach
- 29. Jak ustawić wartość w rozwijanym menu za pomocą Jquery?
- 30. Pobierz bieżącą wartość wybraną w menu rozwijanym przy użyciu jQuery
najbardziej doskonałe. tak jak w życiu, najprostsza odpowiedź zwykle jest właściwa. także 500ms było tylko do testowania, to zbyt szybko, aby większość ludzi zauważyła mimo to ... dzięki koleś. – zero
Mam pewien problem, gdy próbuję wejść i wyjść myszką z menu .. "teraz przed fadeOut" .. mysz w przykładzie Teraz mysz i mysz ... i znowu mysz w messes up animacji. –
@SKS tak, używając zwykłego zdarzenia 'hover' + długie animacje to zrobią. Przełącz na 'hoverIntent' i krótkie animacje, a tego nie zobaczysz. –