打开/关闭图标 - 单击时切换 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>

Answer 2

来试试这个。添加了隐藏的类，在 div 上单击它会切换该类

小提琴：https://jsfiddle.net/uebnwb6w/

HTML

<div class="button">
            <div class="menu-btn">
                    <span>a</span>
                    <span></span>
                    <span></span>
             </div>

             <div class="menu-btn-cross hidden">
                 <span>test</span>
             </div>
</div>

CSS

.button {
    position:fixed;
    height:41px;
    width:80px;
    z-index:900;
}

.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-->

}

.hidden
{
    display:none;
}
}

JQUERY

jQuery(function($){
             $( '.button' ).click(function(){
             $('.menu-btn').toggleClass('hidden');
             $('.menu-btn-cross').toggleClass('hidden');

             })
        })