javascript - 单击打开按钮时菜单未打开

Question

我的菜单有一个问题。

这就是问题 DEMO 来自 codepen.io

在此演示中，您可以看到左侧边栏菜单区域。当您更改浏览器大小时 width < 1050px然后是菜单 opacity:0;按钮将显示在左上角(蓝色按钮)。

问题是当我点击按钮时左侧边栏没有打开。工作示例在这里没有 css 媒体屏幕。

工作 DEMO 没有 css 媒体屏幕

代码如下:

HTML

<div class="header-left">
  Change browser size width < 1050px
  <div class="menu-area">
    <div class="icon-header-home-menu menu-show-hide">Click to Show Button now</div>
    <div class="menu-area-wrap ">
      <div class="menu-item-info">MENU AREA</div>
    </div>
  </div>
</div>

CSS

.header-left{
  float: left;
  width: 50%;
  background-color:black;
  color:#ffffff;
  padding:10px;
}
.menu-area {
  float: left;
}
.icon-header-home-menu {
  margin: 0;
  padding: 4px 0px 0px 0px;
  margin-left: 5px;
  width: 100%;
  color: #ffffff;
  overflow: hidden;
  float: left;
  font-size: 25px;
  background-color:blue;
}
.menu-area-wrap {
  position: absolute;
  width: 230px;
  height: 800px;
  top: 42px;
  left: 52px;
  background-color:red;
}
.menu-item-info {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 20px;
  background-color:green;
}
.menu-area-wrap.active {
  opacity:1;
  -webkit-transform-origin: right top 0px; 
  -webkit-transform: scale(1); 
}
.menu-show-hide{
  display:none;
}
@media all and (max-width: 1050px) {
    .menu-show-hide {
       display:block;   
        }

    .menu-area-wrap{
  position: absolute;
  top: 42px;
  left:0;    /*changed here*/
  width:100%;  /*changed here*/
  z-index: 1000;
  font-size: 14px;
  text-align: left;
  background: #009688;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  display:none;
  -webkit-transform-origin: left top 0px; 
  -webkit-transform: scale(0); 
    opacity:0;
}

    }

JS

$('html').click(function() {
  $('.menu-area-wrap').removeClass("active");
});


$(".icon-header-home-menu").click (function(e){
  e.stopPropagation();
  $('.menu-area-wrap').toggleClass("active");
});

 $('.menu-area-wrap').click (function(e){
  e.stopPropagation();
});

Answer 1

在您的媒体屏幕内试试这个:

.menu-area-wrap.active {
    display: block;
}

您的媒体屏幕有 display:none 而您的事件类没有 display:block。

所以，在桌面上你改变了不透明度，但在移动设备上你改变了显示，因此，你的事件类不会做任何事情，因为它仍然有 display:none 覆盖你的 opacity: 0。

$('html').click(function() {
  $('.menu-area-wrap').removeClass("active");
});


$(".tt").click(function(e) {
  e.stopPropagation();
  $('.menu-area-wrap').toggleClass("active");
});

$('.menu-area-wrap').click(function(e) {
  e.stopPropagation();
});

.header-left {
  float: left;
  width: 50%;
  background-color: black;
  color: #ffffff;
  padding: 10px;
}
.menu-area {
  float: left;
}
.icon-header-home-menu {
  margin: 0;
  padding: 4px 0px 0px 0px;
  margin-left: 5px;
  width: 100%;
  color: #ffffff;
  overflow: hidden;
  float: left;
  font-size: 25px;
  background-color: blue;
}
.menu-area-wrap {
  position: absolute;
  width: 230px;
  height: 800px;
  top: 42px;
  left: 52px;
  background-color: red;
}
.menu-item-info {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 20px;
  background-color: green;
}
.menu-area-wrap.active {
  opacity: 1;
  -webkit-transform-origin: right top 0px;
  -webkit-transform: scale(1);
}
.menu-show-hide {
  display: none;
}
@media all and (max-width: 1050px) {
  .menu-show-hide {
    display: block;
  }
  .menu-area-wrap.active {
    display: block;
  }
  .menu-area-wrap {
    position: absolute;
    top: 42px;
    left: 0;
    /*changed here*/
    width: 100%;
    /*changed here*/
    z-index: 1000;
    font-size: 14px;
    text-align: left;
    background: #009688;
    background-clip: padding-box;
    -webkit-transition: all 0.2s ease;
    display: none;
    -webkit-transform-origin: left top 0px;
    -webkit-transform: scale(0);
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
  Change browser size width
  < 1050px <div class="menu-area">
    <div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
    <div class="menu-area-wrap ">
      <div class="menu-item-info">MENU AREA</div>
    </div>
</div>
</div>

带动画:

删除了移动设备中的display: none。

$('html').click(function() {
  $('.menu-area-wrap').removeClass("active");
});


$(".tt").click(function(e) {
  e.stopPropagation();
  $('.menu-area-wrap').toggleClass("active");
});

$('.menu-area-wrap').click(function(e) {
  e.stopPropagation();
});

.header-left {
  float: left;
  width: 50%;
  background-color: black;
  color: #ffffff;
  padding: 10px;
}
.menu-area {
  float: left;
}
.icon-header-home-menu {
  margin: 0;
  padding: 4px 0px 0px 0px;
  margin-left: 5px;
  width: 100%;
  color: #ffffff;
  overflow: hidden;
  float: left;
  font-size: 25px;
  background-color: blue;
}
.menu-area-wrap {
  position: absolute;
  width: 230px;
  height: 800px;
  top: 42px;
  left: 52px;
  background-color: red;
}
.menu-item-info {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 20px;
  background-color: green;
}
.menu-area-wrap.active {
  opacity: 1;
  -webkit-transform-origin: right top 0px;
  -webkit-transform: scale(1);
}
.menu-show-hide {
  display: none;
}
@media all and (max-width: 1050px) {
  .menu-show-hide {
    display: block;
  }
  .menu-area-wrap {
    position: absolute;
    top: 42px;
    left: 0;
    /*changed here*/
    width: 100%;
    /*changed here*/
    z-index: 1000;
    font-size: 14px;
    text-align: left;
    background: #009688;
    background-clip: padding-box;
    -webkit-transition: all 0.2s ease;
    -webkit-transform-origin: left top 0px;
    -webkit-transform: scale(0);
    opacity: 0;
  }
  .menu-area-wrap.active {
    opacity: 1;
    -webkit-transform-origin: right top 0px;
    -webkit-transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
  Change browser size width
  < 1050px <div class="menu-area">
    <div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
    <div class="menu-area-wrap ">
      <div class="menu-item-info">MENU AREA</div>
    </div>
</div>
</div>