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

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

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

* { 
 
    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; 
 
}

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

这是例如JS的onclick功能。 注意，在JS中强制“单击”将不起作用。移动设备安全设置:)。