javascript - 打开/关闭图标 - 单击时切换 div

Question

我有一个汉堡菜单，可以根据需要下拉功能。但是，我希望这 3 行在点击时切换为十字。

我知道如何在类之间切换，但到目前为止还没有奏效 - 我需要切换实际的 div 内容。 menu-btn 是汉堡包，我需要制作一个带有十字的新 div(仍在尝试解决这个问题!)- 假设我们将该按钮称为“menu-btn-cross”。所以在“按钮”点击时，我想在 menu-btn 和 menu-btn-cross 之间切换

任何帮助都会很棒。这是我到目前为止所拥有的:

.button {
  position: fixed;
  height: 41px;
  width: 80px;
  z-index: 900;
  right: 0;
}
.menu-btn {
  width: 30px;
  height: 30px;
  padding-left: 30px;
  padding-top: 7px;
  cursor: pointer;
  cursor: hand;
}
.menu-btn span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px 0;
  background: #FFF;
  z-index: 99;
}
.menu-btn-cross {
  /*my cross will go here*/
}

<div class="button">
  <div class="menu-btn">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div class="menu-btn-cross"></div>
</div>

Answer 1

试试这段代码。

<script>
    $(function () {
        $('.menu-btn-cross').hide();
    })


    $('.button').click(function () {
        $('.menu-btn').toggle();
        $('.menu-btn-cross').toggle();
    })
</script>