Rozwijane menu. Problem ze zwijaniem., Menu UL połączone z DIVami. Opcje

[adbacz]

Napisałem sobie mały skrypcik, który pokazuje DIVa (ostylowanego przez CSS) o ID takim, który jest przekazany do funkcji JS. Wszystko ładnie działa, po najechaniu kursorem wszystkie divy się pokazują, ale problem leży w znikaniu.

Jeśli najedzie się na któryś z LI, pokazuje się dany DIV, jeśli się najedzie na tego DIVa i "zjedzie" spowrotem to sie ładnie chowa, ale jeśli sie najedzie na LI i nie najedzie na DIVa to ten się nie chowa dopóki się na niego nie najedzie i nie "zjedzie". Po prostu nie umiem tego zrobić i tyle.

Oczywiście wykoncypowałem coś takiego, żeby sprawdzać warunek: jeśli kursor najedzie na LI ale nie najedzie na DIVa, to odliczać 3 sekundy i po tych trzech sekundach zchować DIVa, a gdy w ciągu tych trzech sekund kursor najedzie na diva to już go nie ukrywać.

Zrobiłem tylko to odliczanie (docoment.setTimeout()), ale po moim kombinowaniu z efektem miałem problemy, np po rozwinięciu się dwóch DIVów (pokazywanie i chowanie z opóźnieniem), gdy zjadę z jednego na drugiego, to ten drugi się jakby zmniejsza i w ogóle wychodza mi jakieś dziwne rezultaty.

Mógłby mi ktoś podać jakiś pomysł, jak to wykonać? Niezbt się znam na JS i jQuery (szczerze mówiąc to na FW lepiej niż na czystym języku ;/). Tak, kożystam z jQuery. Oto dotychczasowy kod JS:

[HTML] pobierz, plaintext 
<script>
var _boxCartContentShow = false;
function BHShowCartContent() {
  //Jeśli box jest tamknięty to go pokazujemy
  if(_boxCartContentShow == false) {
    $('#box_cart_content').css({'display': 'block'});
    _boxCartContentShow = true;
  }
  //Jeśli otwarty, zamykamy
  else {
    $('#box_cart_content').css({'display': 'none'});
    _boxCartContentShow = false;
  }
  return false;
}
 
/*
*   Pokazuje lub ukrywa elementy menu. Ostylowanie CSS.
*/
var _menuCurrentId = false;
function BHShowMenu(id) {
  //Ukrywamy wszystkie inne menu, jeśli parametr ID jest inne niż te ze zmiennej globalnej
  if(id != _menuCurrentId) {
    $('.menu_slide').each( function(index) {
      $(this).slideUp(500);
    });
  }
 
  //Pokazujemy menu z ID z parametru, jeśli jest inne niż te ze zmiennej globalnej
  if(id != _menuCurrentId) {
    //Pokazujemy menu
    $('#' + id).slideDown(500); 
  }
 
  //Przypisujemy ID do zmiennej, żeby wiedzieć jaka aktualnie zakładka jest pokazana.
  _menuCurrentId = id; 
 
}
 
$(document).ready(function() {
  //Jeśli myszka opuści pokazaną przed chwila zakłądkę to ja ukrywamy
  $('.menu_slide').bind('mouseleave', function() {
    $(this).each( function() {
      $(this).slideUp(500);
    });
 
    //Zerujemy aktualną zakładke menu
    _menuCurrentId = false; 
  }); 
 
  /* Tutaj właśnie próbowałem wykombinowac jak chować divy, ale właśnie tutaj wychodziły mi te dziwne rzeczy o których napisałem wyżej.
  $('ul#menu').bind('mouseleave', function() {
    $('#' + _menuCurrentId).slideUp(500);
 
    //Mogę się założyć, że przez te linijki 3, ale nie wiedziałem co innego zrobić dlaego kombinowałem jak mogłem
    $('#' + _menuCurrentId).bind('mouseenter', function() {
      $(this).stop().show();
    });
    //Zerujemy aktualną zakładke menu
    _menuCurrentId = false; 
  });*/
 
});
</script>
[HTML] pobierz, plaintext 

EDIT: Nie ma tagów [js][/js]?

Ten post edytował adbacz 7.02.2012, 08:54:29