【前提】
JS/jQuery初心者です。
やろうとしていることは、リスト項目それぞれの項目名をクリックしたら、項目名の横の矢印が下向きから上むきになり、項目名の下に詳細画面がスライド式に現れるという動作です。
以下のようにコードを書いたのですが、ページ読み込み後数秒間の間にこれを発火させるとスライドがかくかくしたりなんだか安定しないです。
js
1 $('.career-name').each(function(){ 2 var count = 0 3 $(this).on('click', function(){ 4 count++; 5 $(this).next('div').children('div').fadeToggle(800); 6 $(this).next('div').slideToggle(500); 7 $(this).children('div').toggleClass('arrow-up'); 8 $(this).children('div').toggleClass('arrow-down',count %2==0); 9 }); 10 });
html
1<li class="career-list_item engineer"> 2 <div class="career-name first-item"> 3 <p>項目名</p> 4 <div class="career-arrow"></div> 5 </div> 6 <div class="career-detail_container"> 7 <div class="career-detail"> 8 <p class="recruit-message">詳細 9 </p> 10 <table class="recruit-conditions"> 11 中略 12 </table> 13 </div> 14 </div> 15</li>
css
1.career-arrow { 2 margin: 7px 16px; 3 width: 18px; 4 height: 18px; 5 border-style: solid; 6 border-width: 0 2px 2px 0; 7 border-color: rgba(255,255,255,0.95); 8 float: right; 9 transform: rotate(45deg); 10} 11 12@keyframes arrow-up { 13 from { 14 transform:rotate(45deg); 15 } 16 50%{ 17 transform:rotate3d(1,1,0,90deg); 18 } 19 to{ 20 transform:rotate3d(1,-0.43,0,180deg) translateX(-7px) translateY(-7px); 21 } 22} 23 24.arrow-up { 25 animation: arrow-up .8s ease-in-out 0s forwards; 26} 27 28@keyframes arrow-down { 29 from { 30 transform:rotate3d(1,-0.43,0,180deg) translateX(-7px) translateY(-7px); 31 } 32 50%{ 33 transform:rotate3d(1,1,0,90deg); 34 } 35 to{ 36 transform:rotate(45deg); 37 } 38} 39 40.arrow-down { 41 animation: arrow-down .8s ease-in-out 0s forwards; 42}
eachで回している点や、クラス指定している点、childrenを使っている点が重さの原因な気がしているのですが、複数項目に対してのコードでよりよい書き方が思い当たりません。
なにかいい案があれば、教えていただけないでしょうか。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー