0
私は、メニューをスライドさせながら下に向かって矢印があるメニューを作成しようとしています。私がしたいのは、クリックしたときに上向きの矢印に画像を変えることです。これはonclickを使って実現しました。しかし、もう一度クリックすると、イメージを下向きの矢印に戻したいと思います。私は、jQuery、css、htmlの両方でさまざまなコードを試しました。 、これはjQueryのあるクリックを2回目にクリックすると元の画像に戻ります
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
W3Schoolsの上でこれを見つけた：
これは、これまで私が持っているコードです。これは、メニューをトグルするためのものです。
<div id="menu" class="m1">
<div id="flip" >
<img src="pic/aroowdown.png" width="32" height="32" onclick="this.src='pic/aroowup.png'" />
</div>
<div id="panel">
<ul>
<li><a href="epi.hmtl"> EPISODER </a></li>
<li><a href="kar.html"> KARAKTERER </a></li>
<li><a href="about.html"> OM OSS </a></li>
<li><a href="prod"> PRODUKSJON <a></li>
</ul>
</div>
</div>
これは「フリップ」と「パネル」で、「onClick」を使用していることがわかります。
フリップとパネルのCSSを追加することもできます。私はそれが私の質問thoと多く関係があるとは思わない。
#panel, #flip {
text-align: center;
background-color: #000;
height: 30px;
opacity: 0.9;
cursor: pointer;
}
#panel {
padding: 80px;
display: none;
background-color: #A9A9A9;
opacity: 0.9;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding: 0px 30px;
}
誰かがこれに対する答えを知りたいと思っています。私はこのサイトにこのような質問があることを知っていますが、私のために働いた人はいません。
ありがとうございます！