Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сделать родительский элемент меню активным, дочерний элемент которого был нажат (https://javascript.ru/forum/dom-window/80417-sdelat-roditelskijj-ehlement-menyu-aktivnym-dochernijj-ehlement-kotorogo-byl-nazhat.html)

Jimmi 02.06.2020 13:21
Сделать родительский элемент меню активным, дочерний элемент которого был нажат
 
На сайте существует многоуровневое меню. Подскажите как сделать родительский элемент меню активным пунктом, дочерний элемент которого был нажат пользователем.

Пример меню:

<ul class="ul-one">
   <li class="li-one">
      <a href="#">Пункт #1</a>
      <ul class="ul-two">
         <ul class="ul-free">
            <h4><a href="#">Подпункт #1</a></h4>
            <li><a href="#">Подпункт #2</a></li>
            <li><a href="#">Подпункт #3</a></li>
            <li><a href="#">Подпункт #4</a></li>
         </ul>
         <ul class="ul-free">
            <h4><a href="#">Подпункт #5</a></h4>
            <li><a href="#">Подпункт #6</a></li>
            <li><a href="#">Подпункт #7</a></li>
            <li><a href="#">Подпункт #8</a></li>
         </ul>
         <ul class="ul-free">
            <h4><a href="#">Подпункт #9</a></h4>
            <li><a href="#">Подпункт #10</a></li>
            <li><a href="#">Подпункт #11</a></li>
            <li><a href="#">Подпункт #12</a></li>
         </ul>
         <ul class="ul-free">
            <h4><a href="#">Подпункт #13</a></h4>
            <li><a href="#">Подпункт #14</a></li>
            <li><a href="#">Подпункт #15</a></li>
            <li><a href="#">Подпункт #16</a></li>
         </ul>
      </ul>
   </li>
</ul>


При нажатии на (например!) Подпункт #9, у тега li, с классом li-one должен добавиться класс active.

laimas 02.06.2020 13:35
<ul class="ul-free">
<h4> ... такого не может быть.

Jimmi 03.06.2020 07:53
Цитата:
Сообщение от laimas (Сообщение 525301)
<ul class="ul-free">
<h4> ... такого не может быть.
А как должно быть?

рони 03.06.2020 10:10
Jimmi,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
.active > a{
    color: hsla(120, 100%, 40%, 1);
}
.ul-free li:first-child, .li-one.active > a{
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 5px;
}

    </style>

  <script>
document.addEventListener( "click" , ({target}) => {
 const selector = ".li-one .ul-free li";
if(target = target.closest(selector)) target.closest(".li-one").classList.add("active");
 });
  </script>

</head>
<body>
<ul class="ul-one">
   <li class="li-one">
      <a href="#">Пункт #1</a>
      <ul class="ul-two">
         <ul class="ul-free">
            <li><a href="#">Подпункт #1</a></li>
            <li><a href="#">Подпункт #2</a></li>
            <li><a href="#">Подпункт #3</a></li>
            <li><a href="#">Подпункт #4</a></li>
         </ul>
         <ul class="ul-free">
            <li><a href="#">Подпункт #5</a></li>
            <li><a href="#">Подпункт #6</a></li>
            <li><a href="#">Подпункт #7</a></li>
            <li><a href="#">Подпункт #8</a></li>
         </ul>
         <ul class="ul-free">
            <li><a href="#">Подпункт #9</a></li>
            <li><a href="#">Подпункт #10</a></li>
            <li><a href="#">Подпункт #11</a></li>
            <li><a href="#">Подпункт #12</a></li>
         </ul>
         <ul class="ul-free">
            <li><a href="#">Подпункт #13</a></li>
            <li><a href="#">Подпункт #14</a></li>
            <li><a href="#">Подпункт #15</a></li>
            <li><a href="#">Подпункт #16</a></li>
         </ul>
      </ul>
   </li>
</ul>

</body>
</html>

Jimmi 04.06.2020 07:35
Цитата:
Сообщение от рони (Сообщение 525349)
Jimmi,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
.active > a{
    color: hsla(120, 100%, 40%, 1);
}
.ul-free li:first-child, .li-one.active > a{
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 5px;
}

    </style>

  <script>
document.addEventListener( "click" , ({target}) => {
 const selector = ".li-one .ul-free li";
if(target = target.closest(selector)) target.closest(".li-one").classList.add("active");
 });
  </script>

</head>
<body>
<ul class="ul-one">
   <li class="li-one">
      <a href="#">Пункт #1</a>
      <ul class="ul-two">
         <ul class="ul-free">
            <li><a href="#">Подпункт #1</a></li>
            <li><a href="#">Подпункт #2</a></li>
            <li><a href="#">Подпункт #3</a></li>
            <li><a href="#">Подпункт #4</a></li>
         </ul>
         <ul class="ul-free">
            <li><a href="#">Подпункт #5</a></li>
            <li><a href="#">Подпункт #6</a></li>
            <li><a href="#">Подпункт #7</a></li>
            <li><a href="#">Подпункт #8</a></li>
         </ul>
         <ul class="ul-free">
            <li><a href="#">Подпункт #9</a></li>
            <li><a href="#">Подпункт #10</a></li>
            <li><a href="#">Подпункт #11</a></li>
            <li><a href="#">Подпункт #12</a></li>
         </ul>
         <ul class="ul-free">
            <li><a href="#">Подпункт #13</a></li>
            <li><a href="#">Подпункт #14</a></li>
            <li><a href="#">Подпункт #15</a></li>
            <li><a href="#">Подпункт #16</a></li>
         </ul>
      </ul>
   </li>
</ul>

</body>
</html>
Вижу. При нажатии на пункт меню появляется класс active. Но это происходит если ссылки имеют значение # (то есть нет перехода на другую страницу). В моем примере значение ссылки было условным. На самом деле ссылки ведут на другие страницы, а в таком случае класс active не добавляется.

рони 04.06.2020 10:46
Цитата:
Сообщение от Jimmi
На самом деле ссылки ведут на другие страницы, а в таком случае класс active не добавляется.
наверно вы изначально неправильно сформировали вопрос и данные.

laimas 04.06.2020 12:06
Цитата:
Сообщение от Jimmi
А как должно быть?
Чисто по html - только так <ul><li><h4>...


Часовой пояс GMT +3, время: 07:57.