```こんばんは。
こちらのレイアウトを目指しています。
途中までできたのですが、!![イメージ説明]
うまいかない点
・slidetoggleがブルーのimgにかかってしまう。(本当は赤のtextにかけたい)
・toggle上のimg3つをclassでかこっても効かない。。
宜しくお願いします;;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(function(){ $(".slide_wrap .button").on("click", function() { $(this).parent().next().slideToggle(); // 変更。 $(this).toggleClass("active");//追加部分 }); }); </script>
width:200p vertical-align: middle; float:left; } .left p{ text-align:center; } .left h1{margin:0 auto;} .slide_wrap .button{ margin:0 auto; width:100px; height:100px; text-align:center; border:#666 1px solid; background:url(img/off.png) no-repeat; } .slide_wrap .text{ background:pink; width:400px; border:#666 1px solid; display:none; clear: left; } .slide_wrap .button.active{ background:url(img/on.png) no-repeat; } .ttl{ float: left; } .cf{ clear:left; } .content{ width:600px; }
<div class="content"> <div class="left"> <p><img src="img/test_02.png"></p> <p class="button"></p> </div> <p class="ttl"><img src="img/text.jpg"></p> </div> <div class="text">hello</div> </div>
回答1件
あなたの回答
tips
プレビュー