Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.06.2020, 13:21
Аспирант
Отправить личное сообщение для Jimmi Посмотреть профиль Найти все сообщения от Jimmi
 
Регистрация: 28.02.2014
Сообщений: 53

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

Пример меню:

<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.
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2020, 13:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,441

<ul class="ul-free">
<h4> ... такого не может быть.
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2020, 07:53
Аспирант
Отправить личное сообщение для Jimmi Посмотреть профиль Найти все сообщения от Jimmi
 
Регистрация: 28.02.2014
Сообщений: 53

Сообщение от laimas Посмотреть сообщение
<ul class="ul-free">
<h4> ... такого не может быть.
А как должно быть?
Ответить с цитированием
  #4 (permalink)  
Старый 03.06.2020, 10:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,893

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>
Ответить с цитированием
  #5 (permalink)  
Старый 04.06.2020, 07:35
Аспирант
Отправить личное сообщение для Jimmi Посмотреть профиль Найти все сообщения от Jimmi
 
Регистрация: 28.02.2014
Сообщений: 53

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,893

Сообщение от Jimmi
На самом деле ссылки ведут на другие страницы, а в таком случае класс active не добавляется.
наверно вы изначально неправильно сформировали вопрос и данные.
Ответить с цитированием
  #7 (permalink)  
Старый 04.06.2020, 12:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,441

Сообщение от Jimmi
А как должно быть?
Чисто по html - только так <ul><li><h4>...
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поменять дочерний элемент по клику на родительский Win_D jQuery 4 19.06.2018 16:34
Помогите сделать активным только один элемент webmoped Элементы интерфейса 2 07.04.2013 09:13
Как сделать что при получении фокуса элемент div был полностью виден на эране kraw Events/DOM/Window 2 06.02.2012 21:42
Как сделать поле активным при клике на элемент dimaan777 Javascript под браузер 1 24.07.2011 20:16
как сделать элемент активным? vvsh Элементы интерфейса 5 06.10.2009 16:05