"#left")这样点击一个图标就可以展开这个菜单，如果收缩菜单之后点击图标也会出现菜单的内容(标签-jquery)

Question

https://img-mid.csdnimg.cn/release/static/image/mid/ask/09cac3112ce142d0a3472186301912c4.png "#left")
这样点击一个图标就可以展开这个菜单，收缩这个菜单，如果收缩菜单之后点击图标也会出现菜单的内容，用jquery怎么写，或者有什么直接可以用的框架

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你想要实现一个点击图标可以展开菜单的功能，并且在收缩菜单后点击图标也可以出现菜单的内容。

可以使用 HTML 和 CSS 实现这个功能。首先，创建一个容器来存放菜单内容，使用 CSS 将其隐藏，然后使用 JavaScript 和 jQuery 来控制菜单的展开和收缩。

HTML 代码：

<div class="menu-container">
  <div class="menu-icon">+</div>
  <ul class="menu-content">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

CSS 代码：

.menu-container {
  position: relative;
}

.menu-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.menu-content {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  display: none;
}

.menu-container:hover .menu-content {
  display: block;
}

JavaScript 代码：

$(document).ready(function() {
  $(".menu-icon").click(function() {
    $(this).next(".menu-content").toggle();
  });
});

这个解决方案使用了 HTML 和 CSS 创建一个容器来存放菜单内容，然后使用 JavaScript 和 jQuery 来控制菜单的展开和收缩。点击图标时，菜单内容将展开，收缩菜单后点击图标也可以出现菜单内容。

注意：这个解决方案使用了 jQuery 库，如果你不想使用 jQuery，可以使用纯 JavaScript 实现。