.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()，按钮可以在桌面上运行，当然移动菜单是空的。

我实际上无法让它在代码 sn-p 中中断或响应，可能是因为我无法控制 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') 只返回一个带有冒险 id 的 div。

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

然后您可以获取传递的元素，并且使用 jQuery .next() 您可以获得下一个兄弟元素并根据需要隐藏/显示它。随附的小提琴演示了问题和解决方案。

https://jsfiddle.net/6fts2a1w/