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

Ссылка скопирована
JavaScript Vue.js
1 ответ

expanded: true - не работает даже хардкодом. В чём причина не знаю.
Нужно чтобы при нажатии на пункт меню в котором есть вложенные пункты они сразу отображались. Сейчас primevue подставляет треугольник, на который надо нажать чтобы отобразились подпункты, это жутко неудобно..

<template> 		<Tree :value="nodes" class="mw-[300px] bg-white transition-all relative"> 			<template #default="slotProps"> 				<b>{{ slotProps.node.label }}</b> 			</template> 			<template #url="slotProps"> 				<a :href="slotProps.node.data">{{ slotProps.node.label }}</a> 			</template> 		</Tree>  </template>  <script lang="ts" setup> import Tree from 'primevue/tree'; import { ref } from 'vue';   const nodes = ref([ 	{ 		label: 'Меню', 		data: '/admin', 		type: 'url',  	}, 	{ 		key: '0', 		label: 'Маркетинговые акции', 		data: '/promotions', 		type: 'url', 		expanded: true, 		children: [ 			{ key: '0-0', label: 'Промокоды', data: '/promocodes', type: 'url' }, 			{ key: '0-1', label: 'Скидки', data: '/discounts', type: 'url' }, 		] 	}, 	{ 		key: '1', 		label: 'Книги', 		data: '/books', 		type: 'url', 		children: [ 			{ key: '1-0', label: 'Авторы', data: '#', type: 'url' }, 			{ key: '1-1', label: 'Серии', data: '#', type: 'url' }, 		] 	} ]);  </script>

<template> <Tree :value="nodes" class="mw-[300px] bg-white transition-all relative"> <template #default="slotProps"> <b>{{ slotProps.node.label }}</b> </template> <template #url="slotProps"> <a :href="slotProps.node.data">{{ slotProps.node.label }}</a> </template> </Tree> </template> <script lang="ts" setup> import Tree from 'primevue/tree'; import { ref } from 'vue'; const nodes = ref([ { label: 'Меню', data: '/admin', type: 'url', }, { key: '0', label: 'Маркетинговые акции', data: '/promotions', type: 'url', expanded: true, children: [ { key: '0-0', label: 'Промокоды', data: '/promocodes', type: 'url' }, { key: '0-1', label: 'Скидки', data: '/discounts', type: 'url' }, ] }, { key: '1', label: 'Книги', data: '/books', type: 'url', children: [ { key: '1-0', label: 'Авторы', data: '#', type: 'url' }, { key: '1-1', label: 'Серии', data: '#', type: 'url' }, ] } ]); </script>

Дополнительно:

Верный ответ на вопрос.
Надо было тег а заменить на накст-линк. И всё заработало нормально.
функция toggleNode позволяет открывать дерево по клику на заголовок. Ну типа чтобы не целиться по встроенной в плагин tree кнопке. 

<template> 	<keep-alive> 	<Tree 	v-model:expandedKeys="expandedKeys"   @nodeSelect="toggleNode"   selectionMode="single" 	:value="nodes"  		 class="mw-[300px] bg-white transition-all relative"> 		<template #default="slotProps"> 			<b>{{ slotProps.node.label }}</b> 		</template> 		<template #url="slotProps"> 			<nuxt-link :href="slotProps.node.data">{{ slotProps.node.label }}</nuxt-link> 		</template> 	</Tree> 	</keep-alive>  </template>  <script lang="ts" setup> import Tree from 'primevue/tree'; import { ref } from 'vue';   const nodes = ref([ 	{ 		label: 'Меню', 	}, 	{ 		key: '0', 		label: 'Маркетинговые акции', 		children: [ 			{ key: '0-0', label: 'Промоакции', data: '/promotions', type: 'url' }, 			{ key: '0-1', label: 'Промокоды', data: '/promocodes', type: 'url' }, 			{ key: '0-2', label: 'Скидки', data: '/discounts', type: 'url' }, 		] 	}, 	{ 		key: '1', 		label: 'Книги', 		children: [ 			{ key: '1-0', label: 'Книги', data: '/books', type: 'url' }, 			{ key: '1-1', label: 'Авторы', data: '#', type: 'url' }, 			{ key: '1-2', label: 'Серии', data: '#', type: 'url' }, 		] 	} ]);  const expandedKeys = ref({});  function toggleNode({ children, key }) { 	if (children) { 		expandedKeys.value[key] = !expandedKeys.value[key]; 	} }    </script>

<template> <keep-alive> <Tree v-model:expandedKeys="expandedKeys" @nodeSelect="toggleNode" selectionMode="single" :value="nodes" class="mw-[300px] bg-white transition-all relative"> <template #default="slotProps"> <b>{{ slotProps.node.label }}</b> </template> <template #url="slotProps"> <nuxt-link :href="slotProps.node.data">{{ slotProps.node.label }}</nuxt-link> </template> </Tree> </keep-alive> </template> <script lang="ts" setup> import Tree from 'primevue/tree'; import { ref } from 'vue'; const nodes = ref([ { label: 'Меню', }, { key: '0', label: 'Маркетинговые акции', children: [ { key: '0-0', label: 'Промоакции', data: '/promotions', type: 'url' }, { key: '0-1', label: 'Промокоды', data: '/promocodes', type: 'url' }, { key: '0-2', label: 'Скидки', data: '/discounts', type: 'url' }, ] }, { key: '1', label: 'Книги', children: [ { key: '1-0', label: 'Книги', data: '/books', type: 'url' }, { key: '1-1', label: 'Авторы', data: '#', type: 'url' }, { key: '1-2', label: 'Серии', data: '#', type: 'url' }, ] } ]); const expandedKeys = ref({}); function toggleNode({ children, key }) { if (children) { expandedKeys.value[key] = !expandedKeys.value[key]; } } </script>

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Никита Орлов Ответ

Для создания древовидного меню с раскрытыми подразделами на активном пункте вам потребуется использовать HTML, CSS и JavaScript.

Вот пример кода, который поможет вам реализовать такое меню:

HTML:

<div class="tree-menu">
  <ul>
    <li class="active">Главная
      <ul>
        <li>Подраздел 1</li>
        <li>Подраздел 2</li>
        <li>Подраздел 3</li>
      </ul>
    </li>
    <li>О нас</li>
    <li>Контакты</li>
  </ul>
</div>

<div class="tree-menu"> <ul> <li class="active">Главная <ul> <li>Подраздел 1</li> <li>Подраздел 2</li> <li>Подраздел 3</li> </ul> </li> <li>О нас</li> <li>Контакты</li> </ul> </div>

CSS:

.tree-menu ul {
  list-style-type: none;
  padding: 0;
}
 
.tree-menu ul ul {
  display: none;
}
 
.tree-menu ul li {
  cursor: pointer;
}
 
.tree-menu ul li.active &gt; ul {
  display: block;
}

.tree-menu ul { list-style-type: none; padding: 0; } .tree-menu ul ul { display: none; } .tree-menu ul li { cursor: pointer; } .tree-menu ul li.active &gt; ul { display: block; }

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  const treeMenuItems = document.querySelectorAll('.tree-menu ul li');
 
  treeMenuItems.forEach(item =&gt; {
    item.addEventListener('click', function() {
      if (item.classList.contains('active')) {
        item.classList.remove('active');
      } else {
        treeMenuItems.forEach(i =&gt; i.classList.remove('active'));
        item.classList.add('active');
      }
    });
  });
});

document.addEventListener('DOMContentLoaded', function() { const treeMenuItems = document.querySelectorAll('.tree-menu ul li'); treeMenuItems.forEach(item =&gt; { item.addEventListener('click', function() { if (item.classList.contains('active')) { item.classList.remove('active'); } else { treeMenuItems.forEach(i =&gt; i.classList.remove('active')); item.classList.add('active'); } }); }); });

Этот код создаст древовидное меню, при клике на пункт меню с подразделами они будут раскрываться. При этом активный пункт меню будет иметь класс "active" и его подразделы будут видны.

Вы можете дополнить этот код стилями и функционалом по своему усмотрению, чтобы он лучше соответствовал вашим потребностям.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Искусственный интеллект Что делать, если OpenRouter ограничивает доступ к моделям? 1 ответ