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

Question

我正试图将下拉菜单按钮添加到我从这个colorlib模板制作的网站的响应式顶部导航。

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

下面的.appendTo()方法破坏了桌面视图中的下拉按钮，但它们确实在离线菜单中的移动屏幕尺寸上工作。

$('.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')只返回一个带有adventures id的div。

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

然后你可以接受传递的元素，并与jQuery.next()，你可以得到下一个兄弟和隐藏/显示它是必要的。所附小提琴演示了问题和解决方案。

https://jsfiddle.net/6fts2a1w/