https://gyazo.com/8beb8aa146f8438080cc562b79e2a658
About Meなど白いボタンを押したらメニューボタンが✖になっているのをもとの≣に変えたいですけど方法が分かりません
html
1<content> 2 <section class="msg"> 3 <div class="up">Koichiro KODAMA's Portfolio</div> 4 <div class="down">- Web Engineer -</div> 5 </section> 6 <input id="bar" class="bar" name="change" type="checkbox"/> 7 <label class="bar" for="bar"> 8 <i></i> 9 </label> 10 <section class="drawer-list"> 11 <ul> 12 <li><a href="#about">About Me</a></li> 13 <li><a href="#service">Service</a></li> 14 <li><a href="#works">Works</a></li> 15 <li><a href="#contact">Contact</a></li> 16 </ul> 17 </section> 18 </content>
css
1 input.bar:checked ~ label > i { 2 background-color: transparent; 3 -webkit-transform: rotate(90deg); 4 transform: rotate(90deg); 5} 6 7input.bar:checked ~ label > i:before { 8 -webkit-transform: translate(-50%, -50%) rotate(315deg); 9 transform: translate(-50%, -50%) rotate(315deg); 10} 11 12input.bar:checked ~ label > i:after { 13 -webkit-transform: translate(-50%, -50%) rotate(-315deg); 14 transform: translate(-50%, -50%) rotate(-315deg); 15}
でcheckされたら変形するようになっていて、
jQuery
1 $('.drawer-list').find('a').click(function(){ 2 $('.drawer-list').hide(); 3 var bars = document.change; 4 bars.checked = true; 5 }); 6 7 $('.bar').click(function(){ 8 $('.drawer-list').show(); 9 });
でクリックしたらcheckが入るように記述したんですけど、
反映されないです
ヒントなど頂けると幸いです。
回答1件
あなたの回答
tips
プレビュー