Javascript-форум - Запретить ссылку если есть подменю.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Запретить ссылку если есть подменю. (https://javascript.ru/forum/dom-window/69204-zapretit-ssylku-esli-est-podmenyu.html)

Запретить ссылку если есть подменю.

Здравствуйте.

Подскажите пожалуйста, как запретить ссылку в главном меню, если у него есть подменю? Как запретить вообще знаю, но в главном меню есть вкладки у которых нет подменю и они должны работать, а у тех которых есть подменю, ссылка должна быть запрещена, а дочерние отрываться и работать.:) Надеюсь понятно объяснила..

Jolly,
может код? а так выбрать подменю, выбрать ссылку, поставить event.preventDefault(); и всё

<head>
	<meta charset="utf-8">
</head>
<body>
<ul>
	<li><a href="http://google.com">google</a></li>
	<li><a href="http://google.com">google</a></li>
		<ul>
			<li><a href="http://google.com">google</a></li>
		</ul>
		<li><a href="http://google.com">google</a></li>
	<li><a href="http://google.com">google</a></li>
</ul>

	<script>
document.querySelectorAll("ul > ul > li > a")[0].onclick = function(){
  event.preventDefault();
};
</script>
</body>

выбирите нужный селектор
вот вам пример!

Jolly,
как вариант ...
http://javascript.ru/forum/project/3...na-jquery.html

Цитата:

Сообщение от Jolly

как запретить ссылку в главном меню, если у него есть подменю?

А зачем же вы формируете ссылку у элемента, которому она не нужна?

Цитата:

Сообщение от j0hnik (Сообщение 454610)

<head>
	<meta charset="utf-8">
</head>
<body>
<ul>
	<li><a href="http://google.com">google</a></li>
	<li><a href="http://google.com">не должна работь</a>
		<ul>
			<li><a href="http://google.com">google</a></li>
		</ul>
         </li>
	 <li><a href="http://google.com">google</a></li>
          <li><a href="http://google.com">не должна работь</a>
		<ul>
			<li><a href="http://google.com">google</a></li>
		</ul>
         </li>
	<li><a href="http://google.com">google</a></li>
</ul>

	<script>
document.querySelectorAll("ul > ul > li > a")[0].onclick = function(){
  event.preventDefault();
};
</script>
</body>

выбирите нужный селектор
вот вам пример!

Спасибо за ответ.
Наверное я не правильно объяснила(.. В вашем примере, мне нужно чтобы все ссылки открывались, кроме "не должна работать".

Я работаю с Друпал, там наверное по-другому не уберешь(.

Спасибо за помощь, я написала в ответе код, посмотрите пожалуйста.

Цитата:

Сообщение от Jolly

Я работаю с Друпал, там наверное по-другому не уберешь(

Это почему? Код меню формирует сервер, проверить, что есть подменю не сложно, а значит и не добавлять ссылку. Вот только подменю, это например подкатегории, а родитель сама категория. То есть вы фактически лишаете пользователя перехода на категорию. Умнее бы было раскрывать подменю по наведению, а щелчок это переходы.

Цитата:

Сообщение от Jolly (Сообщение 454675)

<head>
	<meta charset="utf-8">
</head>
<body>
	<ul>
		<li><a href="http://google.com">google</a></li>
		<li><a href="http://google.com">не должна работь</a>
			<ul>
				<li><a href="http://google.com">google</a></li>
			</ul>
		</li>
		<li><a href="http://google.com">google</a></li>
		<li><a href="http://google.com">не должна работь</a>
			<ul>
				<li><a href="http://google.com">google</a></li>
			</ul>
		</li>
		<li><a href="http://google.com">google</a></li>
	</ul>
	<script>
		var el = document.querySelectorAll("li:nth-child(2n+2) > a");
		for (var i=0; i<el.length; i++) {
			el[i].onclick = function(){
				event.preventDefault();
			}
		};
	</script>
</body>

Вот селектор для данного примера

Если у вас по другому сформировано все это не сработает!

j0hnik,
не нужно всей этой белиберды. Читать нужно в руководстве CMS о создании меню, оно готовится без проблем и костылей на клиенте.

Спасибо за совет, но как тогда с мобильной версией? Там будет сразу нажатие(.

Цитата:

Сообщение от Jolly

Спасибо за совет

Это кому? В данной CMS все меню определяется в админ панели, ссылкой в них будут те пункты, которым сопоставлен документ (страница). Другими словами вы полностью определяете структуру меню, а вот его поведение определяется либо посредством CSS, либо JS. В последнем случае меню может быть и адаптивным, то есть например, применить некий плагин, а не пользоваться штатным сценарием.

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

Цитата:

Сообщение от j0hnik (Сообщение 454688)

<head>
	<meta charset="utf-8">
</head>
<body>
	<ul>
		<li><a href="http://google.com">google</a></li>
		<li><a href="http://google.com">не должна работь</a>
			<ul>
				<li><a href="http://google.com">google</a></li>
			</ul>
		</li>
		<li><a href="http://google.com">google</a></li>
		<li><a href="http://google.com">не должна работь</a>
			<ul>
				<li><a href="http://google.com">google</a></li>
			</ul>
		</li>
		<li><a href="http://google.com">google</a></li>
	</ul>
	<script>
		var el = document.querySelectorAll("li:nth-child(2n+2) > a");
		for (var i=0; i<el.length; i++) {
			el[i].onclick = function(){
				event.preventDefault();
			}
		};
	</script>
</body>

Вот селектор для данного примера

Если у вас по другому сформировано все это не сработает!

Спасибо, то что нужно), только как применить это к такому коду?:-?

<ul>
   <li class="ded"><span class="google"><a href="http://google.com" class="active">Не должна работать</a></span>
         <ul class="menu" style="display: none; visibility: hidden;">
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
         </ul>
    </li>
	<li class="ded"><span class="google"><a href="http://google.com">Должна работать</a></span>
    </li>
	<li class="ded"><span class="google"><a href="http://google.com">Не должна работать</a></span>
         <ul class="menu" style="display: none; visibility: hidden;">
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
         </ul>
    </li>
	<li class="ded"><span class="google"><a href="http://google.com">Не должна работать</a></span>
         <ul class="menu" style="display: none; visibility: hidden;">
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
            <li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
            </li>
         </ul>
    </li>
	<li class="ded"><span class="google"><a href="http://google.com">Должна работать</a></span>
    </li>
</ul>

j0hnik,
Посмотрите пожалуйста.

Цитата:

Сообщение от Jolly (Сообщение 454820)

j0hnik,
Посмотрите пожалуйста.

<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
	<style>
	</style>
</head>
<body>
	<ul>
		<li class="ded"><span class="google"><a href="http://google.com" class="active">Не должна работать</a></span>
			<ul class="menu" style="display: none; visibility: hidden;">
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
			</ul>
		</li>
		<li class="ded"><span class="google"><a href="http://google.com">Должна работать</a></span>
		</li>
		<li class="ded">
			<span class="google"><a href="http://google.com">Не должна работать</a></span>
			<ul class="menu" style="display: none; visibility: hidden;">
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
			</ul>
		</li>
		<li class="ded"><span class="google"><a href="http://google.com">Не должна работать</a></span>
			<ul class="menu" style="display: none; visibility: hidden;">
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
				<li class="ded"><span class="google"><a href="http://google.com">Google</a></span>
				</li>
			</ul>
		</li>
		<li class="ded"><span class="google"><a href="http://google.com">Должна работать</a></span>
		</li>
	</ul>
	<script>
		var el = document.querySelectorAll("ul>li");
		for (var i=0; i<el.length; i++) {
			if (el[i].querySelector("ul") !== null){ 
				el[i].querySelector("span>a").onclick = function(){
				event.preventDefault();
			}
		}
	};
</script>
</body>
</html>

Надеюсь больше ничего нового не придумаете! :-E