Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как запретить переход по ссылке (https://javascript.ru/forum/misc/73073-kak-zapretit-perekhod-po-ssylke.html)

tema1508 19.03.2018 21:32

Как запретить переход по ссылке
 
Есть меню вида (см.ниже), необходимо чтобы в десктопной версии были активны все ссылки меню, а в мобильной осуществлялся переход только по самой последней в иерархии т.е. только по Игровые, Трансформеры, Планшеты на Android, Планшеты на Windows
Пожалуйста, подскажите, как такое можно реализовать?
(Сделать два меню, одно из которых выводить в десктопной версии, а другое в мобильной не вариант)
<ul class="menu-category">
	<li class="menu-category-item"><a href="/">Ноутбуки, планшеты</a>
		<div class="menu-category-content">
			<ul>
				<li><a href="/">Ноутбуки</a>
					<ul class="menu-category-subcontent">
						<li><a href="/">Игровые</a></li>
						<li><a href="/">Трансформеры</a></li>
					</ul>
				</li>
				<li><a href="/">Планшеты</a>
					<ul class="menu-category-subcontent">
						<li><a href="">Планшеты на Android</a></li>
						<li><a href="/">Планшеты на Windows</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
</ul>

рони 19.03.2018 21:59

tema1508,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".menu-category").on("click", "a", function(event) {
    $(window).width() > 768 || $(this).parents(".menu-category-subcontent").length || event.preventDefault()
})
});
  </script>
</head>

<body>
<ul class="menu-category">
  <li class="menu-category-item"><a href="/">Ноутбуки, планшеты</a>
    <div class="menu-category-content">
      <ul>
        <li><a href="/">Ноутбуки</a>
          <ul class="menu-category-subcontent">
            <li><a href="/">Игровые</a></li>
            <li><a href="/">Трансформеры</a></li>
          </ul>
        </li>
        <li><a href="/">Планшеты</a>
          <ul class="menu-category-subcontent">
            <li><a href="">Планшеты на Android</a></li>
            <li><a href="/">Планшеты на Windows</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </li>
</ul>


</body>
</html>

laimas 19.03.2018 22:46

Цитата:

Сообщение от рони
$(window).width() > 768

Это еще не означает, что мобильное устройство. :) Да и это будет возвращать результат не желаемый.

j0hnik 20.03.2018 02:30

// Определяем тип устройства.
function is_touch_device() {
	return (('ontouchstart' in window)
		|| (navigator.MaxTouchPoints > 0)
		|| (navigator.msMaxTouchPoints > 0));
}

if (!is_touch_device()) {
	alert("Desctop");
}
else alert("Mobile");


Пользуйтесь друзья

laimas 20.03.2018 05:14

j0hnik,
не получится, проблемы с поддержкой, а моб. устройств туево тучево.

j0hnik 20.03.2018 05:39

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

j0hnik 20.03.2018 05:47

laimas,
Проблемы у каких браузеров?

laimas 20.03.2018 05:52

Ослик, у сафари есть. Да и то что нет тачпада, есть не показатель настольной системы.

j0hnik 20.03.2018 07:46

laimas, я вам тут подарочек приготовил.

запускать на телефоне ;)

<script>
var i = 0;
(function run(){
navigator.vibrate(i++);
setTimeout(run, i*4);
})();
</script>

laimas 20.03.2018 07:50

Цитата:

Сообщение от j0hnik
я вам тут подарочек приготовил

Бесполезный для меня, надо сказать, подарочек. :)
Я не пользуюсь телефоном и не собираюсь.


Часовой пояс GMT +3, время: 14:10.