HTMLで使用しているjQueryコードが機能していません。私は "dropbtn"をクリックして隠れたコンテンツを表示するのではなく、隠されたコンテンツを表示します。私はCSS上のすべての "ホバー"効果を取り除こうとしましたが、jQueryコードはまだ動作しませんでした。 jQueryはこれ以外のコードではうまく動作します。これをどうすれば解決できますか？jQueryを使用して、この要素をホバーからクリック効果に変更するにはどうすればよいですか？
jQueryコードがほぼ正しかったので、クラスセレクタに接頭辞.がありませんでした。
同様の方法でスタイリングを行うには、CSSから:hoverルールを削除し、代わりに.dropbtnエレメントの連続したクリックを切り替えるクラスセレクタを使用するだけです。下の例では、私はactiveを使用しました。 jQueryの中でクラスを参照するには
$(document).ready(function() {
$(".dropbtn").click(function() {
$(this).toggleClass('active');
$(".dropdown-content").toggle();
});
});.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
width: 115px;
height: 28px;
border: solid 1px #cebbb1;
background-color: white;
color: #897f63;
margin-left: -5px;
position: relative;
cursor: pointer;
}
.dropbtn.active {
border: solid 1px #0093dc;
color: #0093dc;
}
#mainspan {
font-weight: bold;
position: absolute;
padding-left: 7px;
padding-top: 4px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
border: solid 1px #cebbb1;
width: 170px;
margin-left: -5px;
}
.dropdown-content a {
padding: 1px 14px;
display: block;
color: #897f63;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
text-decoration: none;
color: #897f63;
}<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="DROPDOWN.css">
</head>
<body>
<div class="dropdown">
<div class="dropbtn">
<span id="mainspan">main</span>
</div>
<div class="dropdown-content">
<a href="#">item 1</a>
<a href="#">item 2</a>
</div>
</div>
<script type='text/javascript' src="DROPDOWN.js"></script>
</body>
</html>はい、これを修正してくれてありがとう！私は自分のコードで多くのことを見逃していたようだ。しかし、非常に助けてくれてありがとう、それは大いに感謝しています！ – confused5000
あなたは大歓迎です –
@ confused5000この問題があなたの問題を解決した場合、それを受け入れるべきです。 – Armin
、あなたはクラス名の前に.を含める必要があります：これを試してみてください上のクラス名は `.`ドットが欠落してい
$(".dropbtn").click(function(){
$(".dropdown-content").toggle();
});
Jquery – DaniP
$（ "dropdown-content"）。toggle（）; '$（"。dropdown-content "）。toggle（）;' – Armin
あなたのコードを削除した後に、コードを入手できません。 – UJS