Question

我的问题是这个 - 我已经在一个网站上创建了一个顶级栏横幅，可以很好地通过以下方式：在桌面上悬停。在移动设备上，当您点击它时横幅会拉下来 - 如果您在页面上点击横幅以外的任何地方，它会浮起来。当你再次点击它时，我需要横幅消失，而不是点击页面让它消失。

这是我目前的css：

    aside.banner-container {
width: 100%;
height: 150px;
background: #000;
border-bottom: 1px solid rgba(255,255,255,0.6);
position: absolute;
top: -135px;
cursor: pointer;
margin: 0px auto;
padding-bottom: 10px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
transition: top 1s ease;
z-index: 999;
    }
    .banner-container:hover, .banner-container:focus, .banner-container:active {
position: absolute;
top: 0px;
  }

JSP页面如果有所作为。研究我可以在Javascript中看到onClick事件，但是如果我告诉定位为“top：-135px”onClick将不会因为横幅首先在移动设备上拉下来而需要进行初始点击？还是不，因为这是从技术上悬停的？

Answer 1

＆＃13;

var elem = document.querySelector('.banner');
elem.onclick = function(){
	if ( elem.classList.contains('clicked') ) 
		{
			elem.setAttribute('class','banner');
			elem.style.top = '-260px';
		}
	else 
		{
			elem.setAttribute('class','banner clicked');
			elem.style.top = '0';
		}
}

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all ease-in-out 0.400s;
}
body,html {
  width: 100%;
  height: 100%;
}
.banner-ct {
  position: relative;
  width: 100%;
  height: 300px;
}
.banner {
  position: absolute;
  top: -260px;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: #000;
}
.banner p {
  position: absolute;
  bottom: 10px;
  width: 100%;
  font-size: 40px;
  text-align: center;
}

＆＃13;

<div class="banner-ct">
  <div class="banner">
    <p>...</p>
  </div>
</div>

＆＃13;

这是js onclick函数的示例。请注意，强制＆＃34;点击＆＃34;在JS中没有工作。移动设备安全设置：）。

点击移动设备如何更改横幅位置？

1 个答案: