jQuery菜单无法正确显示

时间：2017-04-27 21:57:13

标签： jquery menu responsive

我正在构建一个点击时出现的菜单。 基本上，我想要做的就是保持＆＃34; btn＆＃34;菜单打开时出现。另外，当我点击菜单div时，我无法弄清楚如何关闭菜单。提前致谢

＆＃13;
＆＃13; 
var sidebarBox = document.querySelector('#box'),
    sidebarBtn = document.querySelector('#btn'),
    pageWrapper = document.querySelector('#page-wrapper');

sidebarBtn.addEventListener('click', function (event) {
		sidebarBtn.classList.toggle('active');
		sidebarBox.classList.toggle('active');
});

pageWrapper.addEventListener('click', function (event) {

		if (sidebarBox.classList.contains('active')) {
				sidebarBtn.classList.remove('active');
				sidebarBox.classList.remove('active');
		}
});

window.addEventListener('keydown', function (event) {

		if (sidebarBox.classList.contains('active') && event.keyCode === 27) {
				sidebarBtn.classList.remove('active');
				sidebarBox.classList.remove('active');
		}
});
＆＃13; 
/*--------RESP MENU -------*/
#btn {
    float:right;
  top: 15px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
  width: 35px;
  height: 2px;
  margin-bottom: 8px;
  background-color: #2d2d2d;
  -webkit-transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#btn.active {
  left: 230px;
        z-index:999 !important;


}
#btn.active div {
  background-color: #343838;
        z-index:999 !important;
    opacity: 1;
}
#btn.active #top {
  -webkit-transform: translateY(10px) rotate(-135deg);
          transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
  opacity: 0;
  /* transform: rotate(135deg); */
}
#btn.active #bottom {
  -webkit-transform: translateY(-10px) rotate(-45deg);
          transform: translateY(-10px) rotate(-45deg);
}

#box {
  position: fixed;

  overflow: auto;
  top: 0px;
  right: -275px;
  width: 275px;
  opacity: 0;
  padding: 20px 0px;
  height: 100%;
  background-color: #f6f6f6;
  color: #343838;
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#box.active {
  right: 0px;
  opacity: 1;
    z-index:4;
}

#items {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#items .item {
  position: relative;
  cursor: pointer;
  font-size: 2em;
  padding: 15px 30px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
#items .item:hover {
  padding: 15px 45px;
  background-color: rgba(52, 56, 56, 0.2);
}

#btn, #btn * {
  will-change: transform;
}

#box {
  will-change: transform, opacity;
}
＆＃13; 
                    <div id="btn">
                    		<div id='top'></div>
                    		<div id='middle'></div>
                    		<div id='bottom'></div>
                    </div>
                    <div id="box">
                    		<div id="items">
                    				<div class="item">Item 1</div>
                    				<div class="item">Item 2</div>
                    				<div class="item">Item 3</div>
                    				<div class="item">Item 4</div>
                    				<div class="item">Item 5</div>
                    		</div>
                    </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

尝试以下

1.You need to assign z-index values to negative value when #box.active
2.You can use event.target.nodeName to find outside of the DIV menu

＆＃13;
＆＃13; 
var sidebarBox = document.querySelector('#box'),
    sidebarBtn = document.querySelector('#btn');

sidebarBtn.addEventListener('click', function (event) {
  sidebarBtn.classList.toggle('active');
  sidebarBox.classList.toggle('active');
});

$(document).on("click",function(e) {
  if(event.target.nodeName != "DIV"){
    sidebarBtn.classList.remove('active');
    sidebarBox.classList.remove('active');
  }
});
＆＃13; 
/*--------RESP MENU -------*/
#btn {
  float:right;
  top: 15px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
  width: 35px;
  height: 2px;
  margin-bottom: 8px;
  background-color: #2d2d2d;
  -webkit-transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#btn.active {
  left: 230px;
  z-index:999 !important;
}
#btn.active div {
  background-color: #343838;
  z-index:999 !important;
  opacity: 1;
}
#btn.active #top {
  -webkit-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
  opacity: 0;
  /* transform: rotate(135deg); */
}
#btn.active #bottom {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

#box {
  position: fixed;

  overflow: auto;
  top: 0px;
  right: -275px;
  width: 275px;
  opacity: 0;
  padding: 20px 0px;
  height: 100%;
  background-color: #f6f6f6;
  color: #343838;
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#box.active {
  right: 0px;
  opacity: 1;
  z-index:-10;
}

#items {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#items .item {
  position: relative;
  cursor: pointer;
  font-size: 2em;
  padding: 15px 30px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
#items .item:hover {
  padding: 15px 45px;
  background-color: rgba(52, 56, 56, 0.2);
}

#btn, #btn * {
  will-change: transform;
}

#box {
  will-change: transform, opacity;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">
  <div id='top'></div>
  <div id='middle'></div>
  <div id='bottom'></div>
</div>
<div id="box">
  <div id="items">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

以下是fiddle

相关问题
最新问题