如何在點擊移動設備時更改橫幅位置？

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中強制「單擊」將不起作用。移動設備安全設置:)。