ボタンを作成してdivをポップアップしようとしていますが、現在私は問題に直面しています。問題は、ボタンをクリックしたときにクラス「トグル」がトグルされていないことです。ボタンがクリックされたときにJavaScriptが起動しない
ここに私のマークアップです:
と私のJS:
function toggle(){
var bottom-bar = document.querySelector('.bottom-bar');
bottom-bar.classList.toggle('toggle');
}
var button = document.querySelector('.bottom-bar_toggle-button');
button.addEventListener('click', toggle);
と私のスタイリング:
.bottom-bar {
position: fixed;
bottom: 0;
width: 76%;
margin: 0 12%;
background-color: #FFFFFF;
padding: 25px;
border-radius: 5px 5px 0 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.bottom-bar .toggle {
height: 100vh;
top: 10%; }
.toggle {
height: 100vh;
top: 10%; }
.bottom-bar_top-info {
text-align: center; }
.bottom-bar_top-info span {
opacity: 0.54; }
.bottom-bar_toggle-button {
position: absolute;
top: 0;
left: 0;
background-color: transparent;
border: 0px;
outline: 0px;
margin: 16px;
padding: 8px;
cursor: pointer; }
ここCodePen経由でのライブの例です:http://codepen.io/ZoidCraft/pen/NRBOqb
これは可変名のハイフンですか?ハイフンは、javascriptで「減算」を意味します – adeneo
JSの 'bottom-bar'は' bottom-bar'と同じです。違いはありますか? –