2013-03-19 3 views
-2

Прямо сейчас он работает на зависании. Мне нужно заставить его работать только на клике, чтобы он работал правильно на мобильном устройстве.Как сменить наведение на клик?

.nav должен быть #access, но после этого я теряюсь. Что я могу изменить .nav, чтобы соответствовать моему css, который из wordpress?

Я пытаюсь получить http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html для работы с wordpress.

http://jsfiddle.net/scottbotkins/dbW2Q/

var ww = document.body.clientWidth; 

$(document).ready(function() { 
    $(".nav li a").each(function() { 
     if ($(this).next().length > 0) { 
      $(this).addClass("parent"); 
     }; 
    }) 

    $(".toggleMenu").click(function(e) { 
     e.preventDefault(); 
     $(this).toggleClass("active"); 
     $(".nav").toggle(); 
    }); 
    adjustMenu(); 
}) 

$(window).bind('resize orientationchange', function() { 
    ww = document.body.clientWidth; 
    adjustMenu(); 
}); 

var adjustMenu = function() { 
    if (ww < 768) { 
     $(".toggleMenu").css("display", "inline-block"); 
     if (!$(".toggleMenu").hasClass("active")) { 
      $(".nav").hide(); 
     } else { 
      $(".nav").show(); 
     } 
     $(".nav li").unbind('mouseenter mouseleave'); 
     $(".nav li a.parent").unbind('click').bind('click', function(e) { 
      // must be attached to anchor element to prevent bubbling 
      e.preventDefault(); 
      $(this).parent("li").toggleClass("hover"); 
     }); 
    } 
    else if (ww >= 768) { 
     $(".toggleMenu").css("display", "none"); 
     $(".nav").show(); 
     $(".nav li").removeClass("hover"); 
     $(".nav li a").unbind('click'); 
     $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { 
      // must be attached to li so that mouseleave is not triggered when hover over submenu 
      $(this).toggleClass('hover'); 
     }); 
    } 
} 

ответ

0

Простая работа вокруг, как удалить

#access ul li:hover > ul { 
    display: block; 
} 

из CSS и

добавить JQuery код

$('#menu-navigation li').click(function(){ 
     $(this).find('.sub-menu').show(); 
     $(this).siblings().find('.sub-menu').hide(); 
}); 

Вы должны изменить код, чтобы получить то, что вы ищете.

+0

Я пробовал, и это не сработало. Это показывает, что я хочу, но мне нужно изменить .nav на #access. http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html – ScottBotkins

+0

вы хотите показать подменю только при нажатии на обход основного меню? –

+0

правильно, это 3 уровня, как показано на веб-сайтах. Я использую их точный код. Я думал, что это будет просто, как изменение .nav на #access ul или что-то в этом роде. – ScottBotkins

Смежные вопросы