Question

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

我知道如何在课程之间切换但到目前为止还没有工作 - 我需要切换实际的div内容。菜单btn是汉堡包，我需要制作一个带有十字架的新div（仍然试图解决这个问题！） - 说让我们调用那个按钮＆＃34; menu-btn-cross＆＃34;。所以在＆＃39;按钮＆＃39;点击，我想在menu-btn和menu-btn-cross之间切换

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

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

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');

             })
        })

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

2 个答案: