Jquery でアコーディオンを作成したのですが、
開いたときにピンクのバーの下に隙間が出来て、そこにコンテンツの文字が入り込んでしまいます。本来であればそこはタイトル部分なのですが、
そこを無視されてしまいます。
どのように対処すればよいかワカリマセン。
宜しくお願いいたします
$(function(){ $(".a_item_r").click(function(){ if($(this).next().css("display")=="none"){ $(this).addClass("open_close_r"); $(this).next().slideUp(300); $(this).next().slideDown(300); $(this).next().children("p").fadeIn(1500); $(".selected").removeClass("selected"); $(this).addClass("selected"); } else { $(this).removeClass("open_close_r"); $(this).next().children("p").css("display","none"); $(this).next().slideUp(300); $(this).removeClass("selected"); } }); });
.a_item_r{ text-align:left; padding:10px; cursor:pointer; position:relative; font-weight:bolder; margin-top:20px; background-color:#FDEFF5; clear:both; } .a_contents_r{ display:none; padding:10px; border:solid 1px #d6dddf; } .selected{ text-align:left; padding:10px; cursor:pointer; position:relative; background-color:#FADCE9; } .a_contents_r p{ display:none; margin:10px 0; border-bottom:dashed 1px #d6dddf; text-align:left; } .a_item_r:after{ background:url(arrow_dw.png) no-repeat left top; content: ""; display: block; width: 20px; height: 10px; position: absolute; right: 20px; background-size: 100% auto; top:15px; bottom:0; -webkit-transition: 0.3s linear; -moz-transition:0.3s linear; -ms-transition:0.3s linear; transition: 0.3s linear; } .open_close_r:after{ -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); }
HTML
//閉じているとき <div class="a_item_r"> 2017年03月22日 test </div> <div class="a_contents_r" style="display: block;"> <div class="pull-left"> <img class="img-responsive" src="/image_media/20170301093617OvAv50.jpg"> </div> <div class="pull-left" style="padding-left:20px;">test</div> </div> //開いたとき <div class="a_item_r open_close_r selected"> 2017年03月22日 test </div> <div class="a_contents_r" style="display: block;"> <div class="pull-left"> <img class="img-responsive" src="/image_media/20170301093617OvAv50.jpg"> </div> <div class="pull-left" style="padding-left:20px;">test</div> </div>
回答1件
あなたの回答
tips
プレビュー