Форум

ColT · #1 (**permalink**) 23.02.2020, 22:46

Всем привет, извините за тупость, не кидайте пожалуйста камнями в меня, я прошу вашего внимания и помощи, но в интернете есть много чего, но того что именно мне надо нету( или есть но не полностью то что мне надо.
В общем есть такая структура меню

<ul class="tree " id="menu">											
<li class="sub">
	<a href="# title="">
		Меню
	</a>
			<ul>										
				<li class="sub">
					<a href="#" title="">
						Меню
					</a>
				</li>															
				<li class="sub">
					<a href="#" title="">
						Меню
					</a>
				</li>
				<li class="sub">
					<a href="#" title="">
						Меню
					</a>
				</li>
			</ul>
</li>
<li class="sub">
	<a href="# title="">
		Меню
	</a>
			<ul>										
				<li class="sub">
					<a href="#" title="">
						Меню
					</a>
				</li>															
				<li class="sub">
					<a href="#" title="">
						Меню
					</a>
				</li>
				<li class="sub">
					<a href="#" title="">
						Меню
					</a>
				</li>
			</ul>
</li>																
<li class="sub">
	<a href="#" title="">
		Меню
	</a>
		<ul>
			<li class="sub">
				<a href="#" title="">
					Меню
				</a>
					<ul>						
						<li class="sub">
							<a href="#" title="">
								Меню
							</a>
						</li>
						<li class="sub">
							<a href="#" title="">
								Меню
							</a>
						</li>
						<li class="sub">
							<a href="#" title="">
								Меню
							</a>
						</li>
					</ul>
			</li>
			<li class="sub">
				<a href="#" title="">
					Меню
				</a>
					<ul>						
						<li class="sub">
							<a href="#" title="">
								Меню
							</a>
						</li>
						<li class="sub">
							<a href="#" title="">
								Меню
							</a>
						</li>
						<li class="sub">
							<a href="#" title="">
								Меню
							</a>
						</li>
					</ul>
			</li>
		</ul>
	</li>
</ul>

Оно 3х уровненное. Могут быть одиночные пункты, могут быть 2х уровненные, могут быть и трех уровненное вложение.

В общем прошу помочь мне, сделать аккордеон меню, первый пункт должен быть открытым при первом заходе, после что бы при клике на иконку, открывались под категории и куками или кешем запоминалось выбранный пункт, и после перезагрузки страницы что бы этот пункт был открыт.
Еще момент, главное что бы открытие было не по нажатию кнопки первого уровня, а что бы рядом была какая то иконка или "+" - вот как пример вам покажу.

рони · #2 (**permalink**) 24.02.2020, 11:38

ColT,

<!DOCTYPE html>
<html>
  <head>
    <title>Untitled</title>
    <meta charset="utf-8" />

    <style>
      .tree {
        width: 200px;
      }
      .tree,
      .tree ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
      }

      .tree a {
        background-color: #eee;
        color: black;
        display: block;
        padding: 12px;
        text-decoration: none;
        position: relative;
      }

      .tree a:hover {
        background-color: #ccc;
      }

      .sub > a {
        background-color: #4169e1;
      }

      .sub > a + ul {
        max-height: 0;
        transition: 1s;
        overflow: hidden;
      }
      .sub > a.active + ul {
        max-height: var(--hh, 0px);
        transition: 1s;
      }
      .sub > a.active {
        background-color: #0000cd;
      }

      .sub > a::after {
        font: 1em;
        font-weight: bold;
        content: '+';
        position: absolute;
        right: 5px;
        top: 2px;
        color: #ffffff;
        border: 1px solid #ffffff;
        height: 12px;
        width: 12px;
        border-radius: 2px;
        line-height: 12px;
        text-align: center;
      }

      .sub > a.active::after {
        content: '-';
      }
      .sub > a:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <ul class="tree" id="menu">
      <li class="sub">
        <a href="#" title="">Меню 1</a>
        <ul>
          <li>
            <a href="#" title="">Меню 1.1</a>
          </li>
          <li>
            <a href="#" title="">Меню 1.2</a>
          </li>
          <li>
            <a href="#" title="">Меню 1.3</a>
          </li>
        </ul>
      </li>
      <li class="sub">
        <a href="#" title="">Меню 2</a>
        <ul>
          <li>
            <a href="#" title="">Меню 2.1</a>
          </li>
          <li>
            <a href="#" title="">Меню 2.2</a>
          </li>
          <li>
            <a href="#" title="">Меню 2.3</a>
          </li>
        </ul>
      </li>
      <li class="sub">
        <a href="#" title="">Меню 3</a>
        <ul>
          <li class="sub">
            <a href="#" title="">Меню 3.1</a>
            <ul>
              <li>
                <a href="#" title="">Меню 3.1.1</a>
              </li>
              <li>
                <a href="#" title="">Меню 3.1.2</a>
              </li>
              <li>
                <a href="#" title="">Меню 3.1.3</a>
              </li>
            </ul>
          </li>
          <li class="sub">
            <a href="#" title="">Меню 3.2</a>
            <ul>
              <li class="sub">
                <a href="#" title="">Меню 3.2.1</a>
                <ul>
                  <li>
                    <a href="#" title="">Меню 3.2.1.1</a>
                  </li>
                  <li>
                    <a href="#" title="">Меню 3.2.1.2</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" title="">Меню 3.2.2</a>
              </li>
              <li>
                <a href="#" title="">Меню 3.3.3</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        let linkActive = JSON.parse(
          localStorage.getItem('linkActive') || '{"0" : true}'
        );
        const parent = document.querySelector('.tree');
        const ulToggle = a => {
          let ul = a.nextElementSibling;
          const hh = ul.scrollHeight;
          const up = a.classList.contains('active');
          do {
            if (ul.nodeName == 'UL') {
              let h = parseFloat(ul.style.getPropertyValue('--hh')) || 0;
              h += up ? -hh : hh;
              h = Math.max(0, h);
              ul.style.setProperty('--hh', `${h}px`);
            }
            ul = ul.parentElement;
          } while (ul !== parent);
          a.classList.toggle('active');
          const i = a.dataset.i;
          linkActive[i] = !up;
        };

        parent.querySelectorAll('.sub > ul').forEach((ul, i) => {
          const a = ul.previousElementSibling;
          a.dataset.i = i;
          const li = ul.closest('li');
          const LiParent = li.closest('ul');
          if (linkActive[i]) ulToggle(a);
          a.addEventListener('click', event => {
            event.preventDefault();
            ulToggle(a);
            [...LiParent.children].forEach(el => {
              if (el != li) {
                const a = el.querySelector('a.active ');
                if (a) {
                  ulToggle(a);
                }
              }
            });
            localStorage.setItem('linkActive', JSON.stringify(linkActive));
          });
        });
      });
    </script>
  </body>
</html>

ColT · #3 (**permalink**) 24.02.2020, 13:51

Спасибо огромное.

Форум

Справочник

Discord чат

Курсы javascript