响应式导航菜单中的下拉按钮在 .appendTo() 之后中断

Question

我正在尝试将下拉菜单按钮添加到我使用此 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() 按钮在桌面上工作，当然移动菜单是空的。

我实际上无法让它在代码片段中中断或响应，可能是因为 Bootstrap 代码不在我手中，所以希望我能找到知道我是什么的人正在谈论或有一些经验。

谢谢

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>

Answer 1

这可能是由于您使用的选择器所致。 $('#adventures') returns 只有一个 div 带有冒险 ID。

如果你想克隆它，你可以改变冒险函数接受一个参数，然后将this传入调用。 onclick="adventures(this);"

然后你可以获取传递的元素，使用 jQuery .next() 你可以获得下一个兄弟元素，并根据需要 hide/show 获取它。附件 fiddle 演示了问题和解决方案。

https://jsfiddle.net/6fts2a1w/

响应式导航菜单中的下拉按钮在 .appendTo() 之后中断

Dropdown button in responsive nav menu breaks after .appendTo()

html

css

jquery

append

dropdown