ボタンをクリックしているときにJavaScriptクラスリストが機能しない

現在、ドロップダウンメニューを作成していますので、Javascript経由でクラスを追加してクリックするとメニューが表示されますが、classListは全く機能しません。私は多くの時間をかけたができなかった。また、私はstyle.display = "block"を追加して、それは動作します！私は把握することができません！私を助けてください！ボタンをクリックしているときにJavaScriptクラスリストが機能しない

document.getElementById('dbtn').addEventListener('click', function() { 
 
    document.getElementById('d-content').classList.toggle('show'); 
 
});

#wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#dbtn { 
 
    background-color: #F44336; 
 
    font-size: 27px; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    border: none; 
 
    padding: 0.3em 0.6em; 
 
    color: #FFFFFF; 
 
    cursor: pointer; 
 
    outline: none; 
 
} 
 

 
#d-content { 
 
    position: absolute; 
 
    display: none; 
 
    background-color: #F44336; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    font-size: 22px; 
 
    border-top: 2px solid #FFFFFF; 
 
    z-index: 1; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
#d-content a { 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 0.3em 5em 0.3em 0.3em; 
 
} 
 

 
#d-content a:hover { 
 
    background-color: darkorchid; 
 
} 
 

 
.show { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Dropdown Menu</title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <input type="button" id="dbtn" value="Select..." /> 
 
    <div id="d-content" class="drop"> 
 
     <a>USA</a> 
 
     <a>Canada</a> 
 
     <a>Europe</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-07-04 Bill

ブラウザは、セレクタに基づいてCSSプロパティ注文セレクタウェイトを算出します。あなたのケースでは#idセレクタがクラスセレクタをオーバーライドします。

.show { 
    display: block !important; 
}

それとも、全く重要使用しない方が良いです。

#d-content.show{ 
    display: block ; 
}

あなたはセレクタ重量hereについての詳細を読むことができます。また、あなたはdev consoleでそれらの種類の事を確認することができます。 CSSで

出典

2017-07-04 09:24:03 deathangel908

これだけです！ありがとうBro！ 9分で答えを尋ねます！ – Bill

ありがとう！私は二番目の答えを好む！ – Bill

Aaah！ありがとう！それは大いに役立つでしょう！ – Bill

、IDセレクタはクラスセレクタにわたってはるか量を有します。

.showdisplayルールに!important;を追加する必要があります。

出典

2017-07-04 09:28:21 James

うん！ありがとうございますが、@ deathangle908からすでに手に入れました！ – Bill

問題はあなたが間違ったアプローチを使用していることです（心配しないでください、それは問題ありません）。表示プロパティを切り替えるだけで時間が大幅に節約できれば簡単です。次のスニペットを使用して表示プロパティを切り替えることができます。

document.getElementById('dbtn').addEventListener('click', function() { 
     var dContent = document.getElementById('d-content'); 
     dContent.style.display = dContent.style.display === 'none' ? 'block' : 'none'; 

    });

出典

2017-07-04 09:35:25

classList.toggleはすべて行います。カスタムトグルする必要はありません！しかし、私はあなたの答えが好きでした。 – Bill

ありがとうございました。私がここで言おうとしているのは、あなたがスタイルシートのショーのための特別なクラスを作ることから救うことです。 –

うん！それは有り難いです！ – Bill

ボタンをクリックしているときにJavaScriptクラスリストが機能しない

答えて

関連する問題