Javascript 如何使用css和html在垂直侧边栏菜单上单击时显示子列表？

我有一个侧边栏，其中有href，单击特定的href，我想显示数据列表

我已经将css与html结合使用以获得所需的结果，但是当我单击href时，我只想将按钮附加到该href，但它将按钮附加到侧栏的底部

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<div class="sidenav">
<a href="#" onclick="javascript:myFunc()">col1</a>
<a href="#">col2</a>
<script> function myFunc() {

var $container = $("#container");
var $sidebar = $("#sidebar");
var button = $('<button />');
var item= 'abc';
button.text(item);
$sidebar.append(button);
var data='cde';
var button = $('<button />');
button.text(data);
$sidebar.append(button);
}</script>

</div>
<div id="container">
    <div id="sidebar">
    </div>
</div>

函数myFunc（）{
var$container=$（“#container”）；
变量$sidebar=$（“#sidebar”）；
var按钮=$（''）；
var项目='abc'；
按钮。文本（项目）；
$sidebar.append（按钮）；
var数据='cde'；
var按钮=$（''）；
按钮。文本（数据）；
$sidebar.append（按钮）；
}

这里是我尝试过的链接-

---

我希望按钮附加在col1之后，而不是col2之后，并且当我再次单击col1时，它会切换。

我不确定您是否正在查看可以使用以下方法尝试的内容。只需在页面加载期间隐藏div，并根据单击事件显示和隐藏即可

函数myFunc（）{
var$container=$（“#container”）；
变量$sidebar=$（“#sidebar”）；
if（$sidebar.children（）.length我正在动态创建按钮并根据数据附加到侧边栏，我是从服务器获得的。我必须切换侧边栏内容。你能帮助我吗？现在请检查一下吗？非常感谢，你能告诉我如何处理菜单上的内容吗？当我单击col1时，它显示两个按钮，当我点击按钮，它会显示表格内容，我希望当我点击col2时，col1内容会在保存后被清除，col2内容会显示出来。非常欢迎您……当您点击col2时，您必须使用sidebar.html（“”）清除侧边栏的内容。就是这样。。祝您好运。但是sidebar.html（“”）单击col2时将不起作用，因为我有另一个函数来显示col2的内容，侧栏仅为col1 myfunct定义？