|
Поговорим о...
|
|
| AleXStam | Дата: Пятница, Сегодня, 13:03 | Сообщение # 46 |
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="ultimate-tree" data-level="{{ $level }}">
{{ range .nodes }}
<li class="tree-node {{ if .children }}has-children{{ end }} {{ if eq (.state | default "closed") "open" }}open{{ else }}closed{{ end }}">
<div class="tree-header">
{{ if .children }}
<span class="tree-toggle">▸</span>
{{ else }}
<span class="tree-icon">•</span>
{{ end }}
<span class="tree-title">{{ .name }}</span>
</div>
{{ if .children }}
<div class="tree-children">
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
</div>
{{ end }}
</li>
{{ end }}
</ul>
<style>
.ultimate-tree {
list-style: none;
padding-left: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
}
.tree-node {
margin: 0;
padding: 0;
position: relative;
}
.tree-header {
display: flex;
align-items: center;
padding: 3px 0;
cursor: pointer;
min-height: 24px;
}
.tree-toggle, .tree-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
flex-shrink: 0;
transition: all 0.2s;
}
.tree-toggle {
font-size: 14px;
color: #555;
}
.tree-icon {
color: #888;
font-size: 16px;
}
.tree-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tree-children {
display: none;
padding-left: 18px;
}
.tree-node.open > .tree-children {
display: block;
}
.tree-node.open > .tree-header > .tree-toggle {
transform: rotate(90deg);
color: #0066cc;
}
.tree-header:hover {
color: #0066cc;
}
.tree-header:hover .tree-toggle,
.tree-header:hover .tree-icon {
color: inherit;
}
</style>
<script>
(function() {
document.addEventListener('DOMContentLoaded', function() {
// Инициализация состояний
document.querySelectorAll('.tree-node.has-children').forEach(node => {
const initialState = node.classList.contains('open');
const children = node.querySelector('.tree-children');
if (initialState) {
children.style.display = 'block';
} else {
children.style.display = 'none';
}
});
// Обработка кликов
document.querySelectorAll('.tree-header').forEach(header => {
header.addEventListener('click', function() {
const node = this.parentElement;
if (node.classList.contains('has-children')) {
const children = node.querySelector('.tree-children');
const isOpen = children.style.display === 'block';
if (isOpen) {
children.style.display = 'none';
node.classList.remove('open');
node.classList.add('closed');
} else {
children.style.display = 'block';
node.classList.remove('closed');
node.classList.add('open');
}
}
});
});
});
})();
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:03 | Сообщение # 47 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="ultimate-tree-container">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
<style>
.ultimate-tree-container {
padding: 12px 16px;
background: #fff;
border-radius: 8px;
border: 1px solid #eaeaea;
max-width: 100%;
overflow-x: auto;
}
</style>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:13 | Сообщение # 48 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="unlimited-tree" data-level="{{ $level }}">
{{ range .nodes }}
<li class="tree-unit {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-head">
{{ if .children }}
<span class="tree-switcher">▸</span>
{{ else }}
<span class="tree-marker">•</span>
{{ end }}
<span class="tree-name">{{ .name }}</span>
</div>
{{ if .children }}
<div class="tree-branch">
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
</div>
{{ end }}
</li>
{{ end }}
</ul>
<style>
.unlimited-tree, .unlimited-tree * {
all: initial;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.unlimited-tree {
list-style: none;
padding-left: 20px;
margin: 0;
font-size: 14px;
line-height: 1.4;
color: #333;
}
.tree-unit {
position: relative;
margin: 1px 0;
}
.tree-head {
display: flex;
align-items: center;
padding: 2px 0;
cursor: pointer;
min-height: 22px;
}
.tree-switcher, .tree-marker {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
flex-shrink: 0;
}
.tree-switcher {
font-size: 14px;
color: #666;
transition: transform 0.2s;
}
.tree-marker {
color: #999;
font-size: 16px;
}
.tree-branch {
display: none;
padding-left: 16px;
}
.tree-unit.open > .tree-branch {
display: block;
}
.tree-unit.open > .tree-head > .tree-switcher {
transform: rotate(90deg);
color: #0066cc;
}
.tree-head:hover {
color: #0066cc;
}
.tree-head:hover .tree-switcher {
color: inherit;
}
</style>
<script>
(function() {
function initializeTree() {
// Инициализация состояний
document.querySelectorAll('.tree-unit.has-children').forEach(unit => {
const branch = unit.querySelector('.tree-branch');
if (unit.classList.contains('open')) {
branch.style.display = 'block';
} else {
branch.style.display = 'none';
}
});
// Обработка кликов
document.addEventListener('click', function(e) {
const head = e.target.closest('.tree-head');
if (!head) return;
const unit = head.parentElement;
if (!unit.classList.contains('has-children')) return;
const branch = unit.querySelector('.tree-branch');
const isOpen = branch.style.display === 'block';
branch.style.display = isOpen ? 'none' : 'block';
unit.classList.toggle('open', !isOpen);
unit.classList.toggle('closed', isOpen);
e.stopPropagation();
});
}
if (document.readyState !== 'loading') {
initializeTree();
} else {
document.addEventListener('DOMContentLoaded', initializeTree);
}
})();
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:13 | Сообщение # 49 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-holder" style="
all: initial;
display: block;
padding: 12px 16px;
background: white;
border-radius: 8px;
border: 1px solid #eee;
margin: 10px 0;
overflow-x: auto;
font-family: inherit;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:31 | Сообщение # 50 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-view">
{{ $level := .level | default 1 }}
<ul class="tree-list level-{{ $level }}">
{{ range .nodes }}
<li class="tree-element {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-dot">•</span>
{{ end }}
<span class="tree-name">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Функция для переключения состояния
function toggleTreeItem(item) {
if (item.classList.contains('has-children')) {
const children = item.querySelector('ul');
if (children) {
const isOpen = item.classList.contains('open');
if (isOpen) {
item.classList.remove('open');
item.classList.add('closed');
children.style.display = 'none';
} else {
item.classList.remove('closed');
item.classList.add('open');
children.style.display = 'block';
}
}
}
}
// Инициализация состояний
document.querySelectorAll('.tree-element').forEach(item => {
if (item.classList.contains('open')) {
const children = item.querySelector('ul');
if (children) children.style.display = 'block';
}
});
// Обработка кликов
document.querySelectorAll('.tree-line').forEach(line => {
line.addEventListener('click', function(e) {
const item = this.parentElement;
toggleTreeItem(item);
e.stopPropagation();
});
});
});
</script>
<style>
.tree-view {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #333;
}
.tree-list {
list-style: none;
padding-left: 20px;
margin: 0;
}
.tree-element {
margin: 1px 0;
position: relative;
}
.tree-line {
display: flex;
align-items: center;
padding: 2px 0;
cursor: pointer;
}
.tree-arrow, .tree-dot {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
}
.tree-arrow {
font-size: 14px;
color: #666;
transition: transform 0.2s;
}
.tree-dot {
color: #999;
font-size: 16px;
}
.tree-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tree-element > ul {
display: none;
}
.tree-element.open > ul {
display: block;
}
.tree-element.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}
.tree-line:hover {
color: #0066cc;
}
.tree-line:hover .tree-arrow,
.tree-line:hover .tree-dot {
color: inherit;
}
</style>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:31 | Сообщение # 51 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container" style="
padding: 12px 16px;
background: white;
border-radius: 8px;
border: 1px solid #f0f0f0;
margin: 10px 0;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:36 | Сообщение # 52 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="ultimate-tree">
{{ $level := .level | default 1 }}
<ul class="tree-ul level-{{ $level }}">
{{ range .nodes }}
<li class="tree-li {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-dot">•</span>
{{ end }}
<span class="tree-name">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<style>
.ultimate-tree {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #333;
}
.tree-ul {
list-style: none;
padding-left: 20px;
margin: 0;
}
.tree-li {
margin: 1px 0;
}
.tree-line {
display: flex;
align-items: center;
padding: 3px 0;
cursor: pointer;
}
.tree-arrow, .tree-dot {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
}
.tree-arrow {
font-size: 14px;
color: #666;
transition: transform 0.2s;
}
.tree-dot {
color: #999;
font-size: 16px;
}
.tree-li > .tree-ul {
display: none;
}
.tree-li.open > .tree-ul {
display: block;
}
.tree-li.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}
.tree-line:hover {
color: #0066cc;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Инициализация состояний
document.querySelectorAll('.tree-li.has-children').forEach(item => {
const ul = item.querySelector('ul');
if (item.classList.contains('open')) {
ul.style.display = 'block';
} else {
ul.style.display = 'none';
}
});
// Обработка кликов
document.querySelectorAll('.tree-line').forEach(line => {
line.addEventListener('click', function() {
const li = this.closest('.tree-li');
if (li.classList.contains('has-children')) {
const ul = li.querySelector('ul');
const isOpen = ul.style.display === 'block';
ul.style.display = isOpen ? 'none' : 'block';
li.classList.toggle('open', !isOpen);
li.classList.toggle('closed', isOpen);
}
});
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:36 | Сообщение # 53 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-wrapper" style="
padding: 12px 16px;
background: white;
border-radius: 8px;
border: 1px solid #eee;
margin: 10px 0;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:42 | Сообщение # 54 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="final-tree">
{{ $level := .level | default 1 }}
<ul class="tree-ul level-{{ $level }}">
{{ range .nodes }}
<li class="tree-li {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-dot">•</span>
{{ end }}
<span class="tree-name">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<style>
.final-tree {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #333;
padding-left: 5px;
}
.tree-ul {
list-style: none;
padding-left: 18px;
margin: 0;
}
.tree-li {
margin: 1px 0;
position: relative;
}
.tree-line {
display: flex;
align-items: center;
padding: 2px 0;
cursor: pointer;
min-height: 22px;
}
.tree-arrow {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
font-size: 14px;
color: #666;
transition: transform 0.2s;
transform: rotate(0deg);
}
.tree-dot {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
color: #999;
font-size: 16px;
}
.tree-li > .tree-ul {
display: none;
}
.tree-li.open > .tree-ul {
display: block;
}
.tree-li.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}
.tree-line:hover {
color: #0066cc;
}
.tree-line:hover .tree-arrow {
color: inherit;
}
</style>
<script>
(function() {
function initTree() {
// Инициализация состояний
document.querySelectorAll('.tree-li.has-children').forEach(item => {
const childrenList = item.querySelector('.tree-ul');
if (item.classList.contains('open')) {
childrenList.style.display = 'block';
item.querySelector('.tree-arrow').style.transform = 'rotate(90deg)';
} else {
childrenList.style.display = 'none';
}
});
// Обработчик кликов
document.addEventListener('click', function(e) {
const line = e.target.closest('.tree-line');
if (!line) return;
const item = line.parentElement;
if (!item.classList.contains('has-children')) return;
const childrenList = item.querySelector('.tree-ul');
const arrow = item.querySelector('.tree-arrow');
const isOpen = childrenList.style.display === 'block';
childrenList.style.display = isOpen ? 'none' : 'block';
arrow.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(90deg)';
item.classList.toggle('open', !isOpen);
});
}
if (document.readyState === 'complete') {
initTree();
} else {
document.addEventListener('DOMContentLoaded', initTree);
}
})();
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:42 | Сообщение # 55 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container" style="
padding: 12px 15px;
background: white;
border-radius: 8px;
border: 1px solid #f0f0f0;
margin: 10px 0;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:46 | Сообщение # 56 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="perfect-tree">
{{ $level := .level | default 1 }}
<ul class="tree-list level-{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-row">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-bullet">•</span>
{{ end }}
<span class="tree-label">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<style>
.perfect-tree {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #333;
}
.tree-list {
list-style: none;
padding-left: 20px;
margin: 0;
}
.tree-item {
margin: 1px 0;
}
.tree-row {
display: flex;
align-items: center;
padding: 3px 0;
cursor: pointer;
min-height: 22px;
}
.tree-arrow {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
font-size: 14px;
color: #666;
transition: transform 0.2s;
}
.tree-bullet {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
color: #999;
font-size: 16px;
}
.tree-item > ul {
display: none;
}
.tree-item.open > ul {
display: block;
}
.tree-item.open > .tree-row > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}
.tree-row:hover {
color: #0066cc;
}
</style>
<script>
(function() {
function initializePerfectTree() {
// Инициализация состояний
document.querySelectorAll('.tree-item.has-children').forEach(item => {
const children = item.querySelector('ul');
if (item.classList.contains('open')) {
children.style.display = 'block';
} else {
children.style.display = 'none';
}
});
// Обработчик кликов
document.addEventListener('click', function(e) {
const row = e.target.closest('.tree-row');
if (!row) return;
const item = row.parentElement;
if (!item.classList.contains('has-children')) return;
const children = item.querySelector('ul');
const isOpen = children.style.display === 'block';
children.style.display = isOpen ? 'none' : 'block';
item.classList.toggle('open', !isOpen);
e.stopPropagation();
});
}
if (document.readyState === 'complete') {
initializePerfectTree();
} else {
document.addEventListener('DOMContentLoaded', initializePerfectTree);
}
})();
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:47 | Сообщение # 57 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-holder" style="
padding: 12px 16px;
background: white;
border-radius: 8px;
border: 1px solid #eee;
margin: 10px 0;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:57 | Сообщение # 58 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="bulletproof-tree">
{{ $level := .level | default 1 }}
<ul class="tree-ul level-{{ $level }}">
{{ range .nodes }}
<li class="tree-li {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-line" onclick="toggleTreeItem(this.parentElement)">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-dot">•</span>
{{ end }}
<span class="tree-name">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<style>
.bulletproof-tree {
font-family: -apple-system, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #333;
}
.tree-ul {
list-style: none;
padding-left: 20px;
margin: 0;
}
.tree-li {
margin: 2px 0;
}
.tree-line {
display: flex;
align-items: center;
cursor: pointer;
padding: 2px 0;
}
.tree-arrow, .tree-dot {
width: 16px;
margin-right: 4px;
text-align: center;
}
.tree-arrow {
transition: transform 0.2s;
}
.tree-li.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}
.tree-li > .tree-ul {
display: none;
}
.tree-li.open > .tree-ul {
display: block;
}
</style>
<script>
function toggleTreeItem(item) {
if (!item.classList.contains('has-children')) return;
const wasOpen = item.classList.contains('open');
item.classList.toggle('open', !wasOpen);
const childrenUl = item.querySelector('.tree-ul');
childrenUl.style.display = wasOpen ? 'none' : 'block';
}
// Инициализация при загрузке
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.tree-li.has-children').forEach(item => {
const childrenUl = item.querySelector('.tree-ul');
if (item.classList.contains('open')) {
childrenUl.style.display = 'block';
} else {
childrenUl.style.display = 'none';
}
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 13:57 | Сообщение # 59 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container" style="
padding: 12px 16px;
background: white;
border-radius: 8px;
border: 1px solid #eee;
margin: 12px 0;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, Сегодня, 16:26 | Сообщение # 60 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="searchable-tree">
{{ $level := .level | default 1 }}
<ul class="tree-list level-{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}
{{ if .id }}id="node-{{ .id }}"{{ end }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-bullet">•</span>
{{ end }}
<a href="{{ .url | default "#" }}" class="tree-link">{{ .name }}</a>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<style>
.searchable-tree {
font-family: -apple-system, sans-serif;
font-size: 14px;
}
.tree-list {
list-style: none;
padding-left: 20px;
}
.tree-item {
margin: 3px 0;
}
.tree-line {
display: flex;
align-items: center;
}
.tree-arrow, .tree-bullet {
margin-right: 5px;
}
.tree-link {
color: inherit;
text-decoration: none;
}
.tree-item > .tree-list {
display: none;
}
.tree-item.open > .tree-list {
display: block;
}
.tree-item.highlighted > .tree-line > .tree-link {
color: #ff0000;
font-weight: bold;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Функция раскрытия пути к элементу
function expandPathToElement(element) {
let parent = element.closest('.tree-item');
while (parent) {
if (parent.classList.contains('has-children')) {
parent.classList.add('open');
parent.querySelector('.tree-list').style.display = 'block';
}
parent = parent.parentElement.closest('.tree-item');
}
}
// Обработка поискового параметра
const urlParams = new URLSearchParams(window.location.search);
const searchNodeId = urlParams.get('highlight');
if (searchNodeId) {
const targetElement = document.getElementById(`node-${searchNodeId}`);
if (targetElement) {
expandPathToElement(targetElement);
targetElement.classList.add('highlighted');
setTimeout(() => {
targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 100);
}
}
// Обработчик кликов
document.querySelectorAll('.tree-line').forEach(line => {
line.addEventListener('click', function(e) {
if (e.target.tagName === 'A') return;
const item = this.parentElement;
if (item.classList.contains('has-children')) {
item.classList.toggle('open');
const list = item.querySelector('.tree-list');
list.style.display = list.style.display === 'none' ? 'block' : 'none';
}
});
});
});
</script>
|
|
|
| |
