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

Question

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

我已经使用带有 html 的 css 来获得所需的结果，但是当我单击 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>

这是我尝试过的链接 - https://jsfiddle.net/gaurav10022/exrLaz14/1/ 我希望在 col1 而不是 col2 之后附加按钮，并且当我再次单击 col1 时，它会切换。

Answer 1

我不确定您在看什么，但是，您可以尝试使用以下方法。只需在页面加载期间隐藏 div 并根据点击事件显示和隐藏。function myFunc() {&nbsp; var $container = $("#container");&nbsp; var $sidebar = $("#sidebar");&nbsp; if($sidebar.children().length <= 0) {&nbsp; &nbsp; var button = $('<button />');&nbsp; &nbsp; var item= 'abc';&nbsp; &nbsp; button.text(item);&nbsp; &nbsp; $sidebar.append(button);&nbsp; &nbsp; var data='cde';&nbsp; &nbsp; var button = $('<button />');&nbsp; &nbsp; button.text(data);&nbsp; &nbsp; $sidebar.append(button);&nbsp; &nbsp; $('#col1').append($container);&nbsp; } else {&nbsp; &nbsp; $sidebar.html('');&nbsp; }&nbsp;&nbsp;}.sidenav {&nbsp; width: 100px;&nbsp; position: relative;&nbsp; z-index: 1;&nbsp; top: 101;&nbsp; left: 201;&nbsp; background: #FFF;&nbsp; overflow-x: hidden;&nbsp; padding: 8px 0;}.sidenav a {&nbsp; padding: 6px 8px 6px 16px;&nbsp; text-decoration: none;&nbsp; font-size: 25px;&nbsp; color: #818181;&nbsp; display: block;}.sidenav a:hover {&nbsp; color: #064579;}button {&nbsp; &nbsp;display: block;&nbsp; &nbsp;cursor: pointer;&nbsp;&nbsp; &nbsp;background-color: #FFF;&nbsp;}<script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">&nbsp;</script><div class="sidenav"><a href="#" onclick="myFunc()" id= "col1">col1</a><a href="#">col2</a></div><div id="container" style="dsiplay: none">&nbsp; &nbsp; <div id="sidebar">&nbsp; &nbsp; </div></div>如果您有任何进一步的疑问，请随时告诉我