打開/關閉圖標-單擊可切換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');

             })
        })