如何使用 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() {

  var $container = $("#container");

  var $sidebar = $("#sidebar");

  if($sidebar.children().length <= 0) {

    var button = $('<button />');

    var item= 'abc';

    button.text(item);

    $sidebar.append(button);

    var data='cde';

    var button = $('<button />');

    button.text(data);

    $sidebar.append(button);

    $('#col1').append($container);

  } else {

    $sidebar.html('');

  }

  

}

.sidenav {

  width: 100px;

  position: relative;

  z-index: 1;

  top: 101;

  left: 201;

  background: #FFF;

  overflow-x: hidden;

  padding: 8px 0;

}

.sidenav a {

  padding: 6px 8px 6px 16px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

}

.sidenav a:hover {

  color: #064579;

}

button {

   display: block;

   cursor: pointer; 

   background-color: #FFF;

 }

<script 

src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 

</script>

<div class="sidenav">

<a href="#" onclick="myFunc()" id= "col1">col1</a>

<a href="#">col2</a>

</div>

<div id="container" style="dsiplay: none">

    <div id="sidebar">

    </div>

</div>

如果您有任何进一步的疑问，请随时告诉我