удалить класс, если мобильный

Я пытаюсь удалить класс на некоторых тегах a, если его мобильное устройство предотвращает эффект зависания, который происходит при касании, что делает якоря трудными для использования на устройствах. Не уверен, почему это не сработает, но, увы, не работает, но работает над элементами li. Вот структура и JSудалить класс, если мобильный

HTML

<div class="slideRight"> 
        <ul class="imageList imgListIntro"> 
         <li><a href="img/res/golf/1-1.jpg" data-lightbox="golf-1" data-title="Range" class="hvr-wobble-vertical"><img src="img/res/golf/1-1.jpg" class="animateHidden"></a></li> 
         <li><a href="img/res/golf/1-2.jpg" data-lightbox="golf-1" data-title="Scorecard" class="hvr-wobble-vertical"><img src="img/res/golf/1-2.jpg" class="animateHidden"></a></li> 
         <li><a href="img/res/golf/1-3.jpg" data-lightbox="golf-1" data-title="St. Andrews" class="hvr-wobble-vertical"><img src="img/res/golf/1-3.jpg" class="animateHidden"></a></li> 
         <li><a href="img/res/golf/1-4.jpg" data-lightbox="golf-1" data-title="Challenge" class="hvr-wobble-vertical"><img src="img/res/golf/1-4.jpg" class="animateHidden"></a></li> 
        </ul> 
       </div>

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
    $('#toursButtons li').removeClass('hvr-wobble-vertical'); 
    $('#mainTourNav li').removeClass('hvr-wobble-vertical'); 
    $('.slideRight a').removeClass('hvr-wobble-vertical'); 
    $('#homeButtons li').removeClass('hvr-wobble-vertical'); 
}

источник

2015-04-07 Packy

Кажется, что вы ищете ** медиа-запросы **. –

Я с bruno на этом. В этом случае вы можете проверить ширину экрана (медиа-запросы). Однако, если вы хотите сыграть его с помощью мобильного браузера, я предлагаю вам посмотреть на это: http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser – Dorvalla

Если я могу предложить менее подробную версию: http://jsfiddle.net/yfLwa8ou/ Любые ошибки в консоли? ** Даже более короткое решение **: http://jsfiddle.net/s6dcn90j/ (проверьте css) – blex

Как Бруно упоминается в комментариях media queries бы более вероятно, будет наиболее подходящим решением. Однако, если вы должны «удалить» класс, а не только стиль его специально для меньшего размера экрана, я хотел бы предложить что-то вроде этого:

$(window).bind('DOMContentLoaded load resize', function() { 
    if ($(window).innerWidth() <= problemWidth) { 
    $(element).removeClass('class'); 
    } 
});

Грубых и непроверенное, но должен дать вам правильное представление.

источник

2015-04-07 19:50:37 sareed

Когда вы добавляете или удаляете класс, который вы применяете и не применяете набор стилей. Если вы используете медиа-запросы для выборочного применения стилей на определенных ширинах устройства, это по сути то же самое, что добавлять и удалять класс.

.class {  

    @media (min-width:<<YOUR MOBILE BREAKPOINT>>) { 
    /* apply hover styles here */ 
    } 

    @media (max-width:<<YOUR MOBILE BREAKPOINT - 1>>) { 
    /* apply mobile specific non-hover styles here */ 
    } 
}

Применить эффекты зависания в первом запросе на медиа. Если у вас есть мобильный стиль, чтобы заменить взаимодействие на больших экранах, поместите его во второй запрос. Если вы просто не хотите применять стили наведения на мобильном устройстве и ничего не добавлять, вам не нужен второй медиа-запрос.

источник

2015-04-07 19:53:49

Не могли бы вы немного рассказать о своем решении? – Magnilex

Проблема в том, что мне нужно удалить класс, а не переделывать его. – Packy

@Packy Если у вас нет конкретных stlyes для меньшего размера, не добавляйте второй медиа-запрос. Стили в первом куске не будут применяться при меньшем размере, и это по сути то же самое, что удаление класса. –

удалить класс, если мобильный

ответ

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