アコーディオン機能の三角がくるっと回るやつの設定方法
html
<dt><p><img src="./images/triangle.png" class="arrow"> 学歴</p></dt> <dd><p>長岡技術科学大学 環境工学課程卒業</p></dd> <dt><p><img src="./images/triangle.png" class="arrow"> 実績</p></dt> <dd><p>オーストラリアワーキングホリデー<br>6,000kmヒッチハイク旅制覇</p></dd> <dt><p><img src="./images/triangle.png" class="arrow"> SNS</p></dt>
1. クリックファンクションを設定
2. クリックした要素の三角の画像を取り出す$('img', this)
3. アコーディオンを開くと同時に2で取り出した要素にcssのスタイルを設定.toggleClass('dropdown_toggle')
$(function(){ $('.side_menu dd').hide(); $('.side_menu dt').click(function(e){ // toggleClassは開くときにクラスを当てる // thisの子孫要素である'img'を取り出す $('img', this).toggleClass('dropdown_toggle'); $(this).next('dd').slideToggle() }); })
4. 3で設定される、三角を回転させるためのスタイルを設定
.dropdown_toggle { -webkit-transform: rotate(90deg); transform: rotate(90deg); }