###実行したい事
①名前をクリックする
②非表示にしていたものが出てくる(アコーディオン)
③画像をクリックしたときも同じイベントが起きる
④名前をクリックしても画像を切り替えたい(オープン→クローズ)
###分からないこと
名前をクリックしたときは②非表示にしていたものが出てくるが
画像をクリックしてもオープン→クローズの画像切り替えのみで②非表示にしているものが出てきません。
.staff_btnをクリックの部分に入れれば動くかな…?と思い入れてみましたが、
両方動かなくなったので.staff_btnをクリックイベントから省いています。
.staff_nameクリック→ .staff_bunの内容が出てくる&.staff_btnの画像が切り替わる
.staff_btnクリック→ .staff_bunの内容が出てくる&.staff_btnの画像が切り替わる
どっちをクリックしても同じ動きをするように実装したいです。
↓WEB上で動くようにしました。
https://jsfiddle.net/80orvLmx/
HTML
1<div> 2 <div class="staff_in"> 3 <div class="staff_name"> 4 <h3>ここに名前</h3> 5 <img src="https://placehold.jp/150x150.png" alt="" class="staff_kao" > 6 </div> 7 <div class="staff_bun"> 8 <div> 9 <dl> 10 <dt>Q1</dt> 11 <dd>A1</dd> 12 <dt>Q2</dt> 13 <dd>A2</dd> 14 <dt>Q3</dt> 15 <dd>A3</dd> 16 </dl> 17 </div> 18 </div> 19 <div class="staff_btn"> 20 <img class="onoff-btn" src="https://placehold.jp/30x30.png"> 21 </div> 22 </div> 23 </div> 24 25 <script> 26 var onoff = "off"; 27 var onimg = "https://placehold.jp/ffffff/ffffff/30x30.png"; 28 var offimg = "https://placehold.jp/30x30.png"; 29 30 $('.onoff-btn').click(function() { 31 switch (onoff) { 32 case "off": 33 onoff = "on"; 34 $(this).attr('src',onimg); 35 break; 36 case "on": 37 onoff = "off"; 38 $(this).attr('src',offimg); 39 break; 40 } 41 }); 42</script>
javascript
1$(function() { 2 //パネルを非表示 3 $('.staff_bun').hide(); 4 $('.staff_name') 5 .click(function(e){ 6 //クリックでパネルを開く 7 $('+.staff_bun', this).slideToggle(500); 8 }) 9});
css
1.staff_in{ 2 background: red; 3 padding: 40px 40px 70px 40px; 4 width: 520px; 5 cursor: pointer; 6 cursor: hand; 7 position: relative; 8} 9.staff_btn{ 10 position: absolute; 11 padding-top:30px; 12 left: 50%; 13 transform: translateX(-50%); 14} 15 16.staff_name{ 17 position: relative; 18 padding-left: 30px; 19} 20.staff_name img{ 21 position: absolute; 22 top:-95px; 23 right:0; 24} 25.staff_name h3{ 26 font-size:3em; 27 line-height: 0.8em; 28} 29.staff_bun{ 30 background: #fff; 31 border-radius: 40px; 32 margin-top: 50px; 33 cursor: default; 34} 35.staff_bun dl{ 36 padding:30px 60px; 37}
「クリックで表示する」と「画像の切り替え」のコードが2つに分かれてしまっているので
もう少しスマートな書き方があれば教えていただきたいです。
よろしくお願いします。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/02 03:39
2018/11/02 04:01
2018/11/02 04:04