Копирование и вывод HTML блока

195

29 января 2020, 01:10

Обычный многоуровневый список.
Суть: Необходимо скопировать список
<ul class="dropdown__list"> который находится в элементе списка
<li class="nav__item dropdown"> и вывести вместо id="main-list"

По нажатию на кнопку Назад возвращать всё обратно,
т.е. нужно хранить id="main-list" и выводить обратно по клику.

Элементов <li class="nav__item dropdown"> и <ul class="dropdown__list"> будет много в разметке, поэтому нужно прослушивать нажатие на элемент и в нём искать список.

UPD:

Добавил jQuery код который есть сейчас, но он немного некорректно работает. Выводит много ссылок почему-то.

var myList = $('.nav__item.dropdown'); 
$(myList).on('click', function(event) { 
  event.preventDefault(); 
  var find = $(this).find('.dropdown__list'); 
  var clone = find.children().removeClass('dropdown__item').addClass('nav__item').clone(); 
  $('.nav__list .nav__item').replaceWith(clone); 
});

* { 
  list-style: none; 
  text-decoration: none; 
} 
 
body { 
  font-family: sans-serif; 
} 
 
ul>li>a { 
  color: blue; 
} 
 
ul>li>ul>li>a { 
  color: red; 
} 
 
button { 
  background: none; 
  border: 1px solid black; 
  border-radius: 50px; 
  padding: 10px 20px; 
  cursor: pointer; 
  transition: all 0.5s ease; 
} 
 
button:hover { 
  background: black; 
  color: white; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="nav__list" id="main-list"> 
  <li class="nav__item"> 
    <a href="#" class="nav__link">Cобытия</a> 
  </li> 
  <li class="nav__item dropdown"> 
    <a href="#" class="nav__link">О палате</a> 
    <ul class="dropdown__list"> 
      <li class="dropdown__item"> 
        <a href="#" class="dropdown__link"> 
                        Комиссия 
                    </a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="##" class="dropdown__link">Нормативно-правовая база</a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="###" class="dropdown__link">Структура</a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="####" class="dropdown__link">Обратная связь</a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="#####  " class="dropdown__link">Кадровая политика</a> 
      </li> 
    </ul> 
  </li> 
  <li class="nav__item"><a href="#" class="nav__link">Взаимодействие</a></li> 
  <li class="nav__item"><a href="#" class="nav__link">Контакты</a></li> 
  <li class="nav__item"><a href="#" class="nav__link">Фотогалерея</a></li> 
</ul> 
 
<button type="button">Назад</button>

Answer 1

Вы переусложнили себе задачу.

Сделайте отдельный список и держите его скрытым. При клике в основном списке - копируйте нужный кусок основного списка в этот отдельный список и показывайте вместе с кнопкой. А при клике на кнопку - скрывайте и восстанавливайте основной список.

Смотрите пример кода под ниже:

var myList = $('.nav__item.dropdown'); 
$(myList).on('click', function(event) { 
  event.preventDefault(); 
  var find = $(this).find('.dropdown__list'); 
  var clone = find.children().clone(); 
  clone.removeClass('dropdown__item').addClass('nav__item'); 
  $('#selected-list').html(clone); 
  $('#selected-list, #main-list, #back-btn').toggle(); 
}); 
$('#back-btn').on('click', function(event) { 
  event.preventDefault(); 
  $('#selected-list, #main-list, #back-btn').toggle(); 
});

* { 
  list-style: none; 
  text-decoration: none; 
} 
 
body { 
  font-family: sans-serif; 
} 
 
ul>li>a { 
  color: blue; 
} 
 
ul>li>ul>li>a { 
  color: red; 
} 
 
button { 
  background: none; 
  border: 1px solid black; 
  border-radius: 50px; 
  padding: 10px 20px; 
  cursor: pointer; 
  transition: all 0.5s ease; 
} 
 
button:hover { 
  background: black; 
  color: white; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="nav__list" id="main-list"> 
  <li class="nav__item"> 
    <a href="#" class="nav__link">Cобытия</a> 
  </li> 
  <li class="nav__item dropdown"> 
    <a href="#" class="nav__link">О палате</a> 
    <ul class="dropdown__list"> 
      <li class="dropdown__item"> 
        <a href="#" class="dropdown__link"> 
                        Комиссия 
                    </a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="##" class="dropdown__link">Нормативно-правовая база</a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="###" class="dropdown__link">Структура</a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="####" class="dropdown__link">Обратная связь</a> 
      </li> 
      <li class="dropdown__item"> 
        <a href="#####  " class="dropdown__link">Кадровая политика</a> 
      </li> 
    </ul> 
  </li> 
  <li class="nav__item"><a href="#" class="nav__link">Взаимодействие</a></li> 
  <li class="nav__item"><a href="#" class="nav__link">Контакты</a></li> 
  <li class="nav__item"><a href="#" class="nav__link">Фотогалерея</a></li> 
</ul> 
 
<ul class="nav__list hidden" id="selected-list" style="display:none;"> 
</ul> 
 
 
<button type="button" id="back-btn" style="display:none;">Назад</button>