ナビゲーションバーがあり、ボタンの1つがonclickドロップダウンになります。 私は彼女を作りましたが、最初に、CSSは機能しません。次に、JSが機能しません。
じゃあ見てみて私はそれを3回読み直そうとし、1時間ほどのスペルミスの後にチェックしました。
HTML:
<div class="functionMobileDropDownDropDown">
<button onclick="functionMobileDropdown()" class="functionMobileDropDownDropBtn">
Dropdown
</button>
<div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
CSS:
.functionMobileDropDownDropBtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.functionMobileDropDownDropBtn:hover, .functionMobileDropDownDropBtn:focus {
background-color: #2980B9;
}
.functionMobileDropDownDropDown {
position: relative;
display: inline-block;
}
.functionMobileDropDownDropDown-Content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.functionMobileDropDownDropdown-Content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.functionMobileDropDownDropDown a:hover {
background-color: #ddd
}
.MobileDropDownShow {
display:block;
}
JS:
function functionMobileDropDown(){ document.getElementById( "functionMobileDropDownMyDropDown")。classList.toggle( "functionMobileDropDownShow"); }
window.onclick = function(event){ if(!event.target.matches( '。functionMobileDropDownDropBtn')){
var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('functionMobileDropDownShow')) {
openDropdown.classList.remove('functionMobileDropDownShow');
}
}
} }
function functionMobileDropDown() {
document.getElementById("functionMobileDropDownMyDropDown").classList.toggle("functionMobileDropDownShow");
}
window.onclick = function(event) {
if (!event.target.matches('.functionMobileDropDownDropBtn')) {
var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('functionMobileDropDownShow')) {
openDropdown.classList.remove('functionMobileDropDownShow');
}
}
}
}
.functionMobileDropDownDropBtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.functionMobileDropDownDropBtn:hover, .functionMobileDropDownDropBtn:focus {
background-color: #2980B9;
}
.functionMobileDropDownDropDown {
position: relative;
display: inline-block;
}
.functionMobileDropDownDropDown-Content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.functionMobileDropDownDropdown-Content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.functionMobileDropDownDropDown a:hover {
background-color: #ddd
}
.MobileDropDownShow {
display:block;
}
<div class="functionMobileDropDownDropDown">
<button onclick="functionMobileDropdown()" class="functionMobileDropDownDropBtn">
Dropdown
</button>
<div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
関連した質問
- 1つにカーソルを合わせると、別のCSSに影響します
- CSS:ぼやけたdiv内のぼやけたdivの問題
- 純粋なCSSオーバーレイスクロール
- 水平ナビゲーションバーのドロップダウンメニューの配置関連の問題
- ブートストラップドロップダウン-メニューが開かない
- HTML/CSS + JS(Datatables)で2つの列を1つにマージしてテーブルを表示する
- ページの下部にいるときにドロップダウンボタンに触れると、フッターを持ち上げるスティッキーナビゲーションバー
- ボックスシャドウインセットと通常のdivを持つ方法はありますか
- HTMLとJavaScriptを使用してコピーボタンを作成するにはどうすればよいですか?
- JavaScript onclick画像を変更し、カウンターを増やします
あなたはかなりの名前の違いがありましたクラス そして関数、現在は意図したとおりに機能しています: