Как сделать пункт меню не кликабельным, если он содержит подпункты?

Question

[t_timaa]

Меню сделано через wordpress. Один из пунктов имеет подпункты:
(
меню :
1)Салаты
2)Горячее и т.п
)
Если нажать на меню : просто выведит все имеющиеся блюда
Я попробовал :

pointer-events: none;
cursor: default;

Но тогда остальные подпункты выводиться не будут. Можно как то по другому сделать?

Answer 1

[justdealman]

<ul class="menu">
	<li>
		<a href="#">Меню</a>
		<ul class="menu__sub">
			<li><a href="#">Салаты</a></li>
			<li><a href="#">Горячее</a></li>
		</ul>
	</li>
</ul>

$('.menu__sub').siblings('a').on('click', function(e) {
	e.preventDefault();
});

Answer 2

[Иван Козлов]

Если вы используете стандартные средства WP меню и вывод его, то в выводимом коде меню у li имеющих дочерние элементы будет класс menu-item-has-children.
Нужно через js отменить действие вложенной ссылки.

$('li.menu-item-has-children > a').click(function(e) {
  e.preventDefault();
  return false;
});

Если используется какой-то нестандартный способ вывода, то скрипт надо модернизировать.

Так же как вариант в админке где создаешь меню использовать произвольные ссылки, и вместо ссылки вставлять #

Answer 3

[Сергей]

Через стили ссылку не убрать, это надо на php условия писать.

Answer 4

[Potochilov_Taras]

It's working for me - css only
In wp menu settings for this item put url like #

In your styles add this black magic css

// works only with your link with # in url

a[href="#"] {
    pointer-events: none;
    cursor: default; 
  }