Форум

Jimmi · #1 (**permalink**) 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 · #2 (**permalink**) 02.06.2020, 13:35

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

Jimmi · #3 (**permalink**) 03.06.2020, 07:53

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

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

А как должно быть?

рони · #4 (**permalink**) 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 · #5 (**permalink**) 04.06.2020, 07:35

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

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 не добавляется.

рони · #6 (**permalink**) 04.06.2020, 10:46

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

На самом деле ссылки ведут на другие страницы, а в таком случае класс active не добавляется.

наверно вы изначально неправильно сформировали вопрос и данные.

laimas · #7 (**permalink**) 04.06.2020, 12:06

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

А как должно быть?

Чисто по html - только так <ul><li><h4>...

Форум

Справочник

Discord чат

Курсы javascript