打开/关闭图标-单击可切换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');

             })
        })