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

时间：2015-05-26 14:16:38

标签： javascript jquery css

我的菜单有一个问题。

这是来自codepen.io的问题 DEMO

在此演示中，您可以看到左侧边栏菜单区域。当您更改浏览器尺寸width < 1050px时，菜单opacity:0;和按钮将显示在左上角（蓝色按钮）。

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

在没有css媒体屏幕的情况下使用 DEMO

这是一段代码：

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();
});

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题