Блог

Я пытаюсь добавить кнопки выпадающего меню в адаптивную верхнюю навигацию веб-сайта, который я создаю из этого шаблона colorlib Me — Website by Colorlib.

 function adventures() {
 $("#adventures").toggleClass("show");
}
 

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

 $('.js-clone-nav').each(function() {
 var $this = $(this);
 // suppsoed to copy everything under js-clone-nav into the mobile menu
 $this.clone(true).attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body');
});
 

Если я удалю .appendTo() кнопки, работающие на рабочем столе, хотя, конечно, тогда мобильное меню будет пустым.

На самом деле я не мог заставить его прерываться или реагировать на фрагмент кода, вероятно, из-за кода начальной загрузки, который находится вне моих рук, поэтому, надеюсь, я смогу найти кого-то, кто знает, о чем я говорю, или имеет некоторый опыт.

Спасибо

 function adventures() {
  $("#adventures").toggleClass("show");
}

jQuery(document).ready(function($) {
  $('.js-clone-nav').each(function() {
    var $this = $(this);
    $this.clone(true).attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body');
  });
}); 

 .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.dropdown .dropbtn {
  cursor: pointer;
}

.show {
  display: block;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="site-navigation position-relative" role="navigation">
  <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
    <li class="dropdown has-children">
      <!-- dropdown -->
      <a onclick="adventures()" class="dropbtn">Adventures</a>
      <div id="adventures" class="dropdown-content">
        <a href="#">Adventure 1</a>
        <a href="#">Adventure 2</a>
      </div>
    </li>
    <li><a href="#about-section" class="nav-link">About</a></li>
    <li><a href="#contact-section" class="nav-link">Contact</a></li>
  </ul>
</nav> 

Вероятно, это связано с используемым вами селектором. $('#adventures') возвращает только один div с идентификатором adventures .

Если вы хотите ее клонировать, вы можете изменить функцию adventures, чтобы она принимала аргумент, а затем передавала this его для вызова. onclick="adventures(this);"

Затем вы можете взять переданный элемент, а с помощью jQuery .next() вы можете получить следующий родственный элемент и скрыть / показать его по мере необходимости. Прикрепленная скрипка демонстрирует проблему и решение.

https://jsfiddle.net/6fts2a1w/