jQuery: mobilní menu a touchstart

Havran

jQuery: mobilní menu a touchstart
« kdy: 20. 10. 2013, 18:04:00 »
Ahojte,

nie som velmi zbehly v jQuery a uz vobec nie v jQuery na mobilnych zariadeniach a potrebujem doriesit mobilne menu asi s takouto strukturou:

Kód: [Vybrat]
<ul>
  <li>
    <a href="#">Polozka</a>
    <ul>
      <li><a href="#">Polozka</a></li>
      <li><a href="#">Polozka</a></li>
      <li><a href="#">Polozka</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Polozka</a>
    <ul>
      <li><a href="#">Polozka</a></li>
      <li><a href="#">Polozka</a></li>
      <li><a href="#">Polozka</a></li>
    </ul>
  </li>
...
</ul>

Spravanie by malo byt take ze prvy klik na hlavnu polozku len otvori a zobrazi podmenu, kde sa bude dat normalne klikat na polozky.
Druhy klik na hlavnu polozku menu ma prekliknut na stranku.

Kod vyzera asi takto:

Kód: [Vybrat]
function menu_init($) {
  // pre desktop toto nedefinujeme
  if (desktopDevice) return;
 
  if (!$("#block-menu-menu-hlavne-fixovane-menu").hasClass('init-touch')) {   

    // po prvom kliknutí na odkaz podwebu sa zobrazí menu s kategóriami podwebu
    // (okrem odkazu "domov", ten je odkazom vždy) po druhom kliknuti sa prejde na podweb
    $("#block-menu-menu-hlavne-fixovane-menu a.menu-to-expand").bind('touchstart MSPointerDown', function(e) {   
      // ak sa klikne druhýkrát na odkaz podwebu, link sa bude chovať štandardne
      if ( $(this).parent().hasClass("clicked") ||
           $(this).parent().hasClass("domov") ||
           ($('#mobile-menu').is(':visible') && $(this).parent().hasClass("hladat")) ) {
        return true;
      }

      $('#block-menu-menu-hlavne-fixovane-menu a.menu-to-expand').parent().removeClass("clicked");
      $(this).parent().addClass("clicked");

      return false;
    });

    // po dotyku mimo menu sa menu zbalí
    $(document).bind('touchstart MSPointerDown', function(e) {
      if ($(e.target).closest('#block-menu-menu-hlavne-fixovane-menu').length == 0) {
        $('#block-menu-menu-hlavne-fixovane-menu .top-menu-item').removeClass('clicked');
        $('#block-menu-menu-hlavne-fixovane-menu .top-menu-item .menu-expanded').removeAttr('style');
        e.stopPropagation();
      }
    }); 

    // uz sme inicializovali
    $("#block-menu-menu-hlavne-fixovane-menu").addClass('init-touch')   
  }
}

Problem je v tom ze touchstart na tablete/mobile (iPad/iPhone) zaklikne aj dalsiu polozku. nie len tu ktorej som sa dotkol.

Nemate nejaky zdroj pripadne navrh ako sa toto da vyriesit? Dakujem.

Juraj Chlebec
« Poslední změna: 20. 10. 2013, 19:52:56 od Petr Krčmář »