###前提・実現したいこと
下記のヤフー動画のような、ページ先頭にスクロールしてアコーディオンを上側に開く動きを実現したいのですが、実現方法が分からず困っております。
http://video.search.yahoo.co.jp/search;_ylt=A2RCD0.0N2ZYaF4AnTiHrPN7;_ylu=X3oDMTBhOWNlbW1mBHZ0aWQDVlMwMDE-?p=%E7%8C%AB&aq=-1&oq=&ei=UTF-8
###発生している問題・エラーメッセージ
下記のサイトを参考に、jQueryでページ先頭にスクロールするアコーディオンは実現できたのですが、アコーディオンが下に開いてしまい、上に開かない状態です。
http://pops-web.com/main/pops/archives/363
「.slideToggle()」の前に「.prev()」をつければ上に開くとの情報があり試しましたが、実現できませんでした。
###試したこと
下記のようなコードで、ページ先頭にスクロールするアコーディオンまでは出来ております。
<script type="text/javascript"> (function($){ $(function(){ //速度 var slide_speed=400; //active要素を指定して開く var no=0; var keep_Item; //---------------------------------- var accordionItem=$('#accordion-42x');//Item //MENUブロック一旦非表示 accordionItem.find('.accordion-block').hide(); //active要素を指定して開く accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){ //指定要素位置にスクロール scroll_top(accordionItem.find('h3').eq(no)); }); //click-action accordionItem.find('h3').click(function() { //hit判定クラス $(this).toggleClass("active"); var slideItem=$(this).next('div'); keep_Item=$(this); //hit分岐処理 if ($(this).hasClass('active')) { //hitクラス切り替、開いている要素を閉じる var siblingsItem=$(this).siblings('div:visible'); if(siblingsItem.length){ siblingsItem.slideUp(slide_speed,function() { siblingsItem.prev('h3').toggleClass("active"); slideItem.slideToggle(slide_speed,function() { //scroll scroll_top(keep_Item); }); }); }else{ //開いている要素がない slideItem.slideToggle(slide_speed,function() { //scroll scroll_top(keep_Item); }); } } if (!$(this).hasClass('active')) { //hitクラスを閉じる slideItem.slideToggle(slide_speed,function() { //scroll scroll_top(keep_Item); }); } }); //hover-toggle accordionItem.find('h3').hover(function () { //toggle hoveredクラス $(this).toggleClass('hovered'); }); //scroll-accordion-top function scroll_top(scrollitem){ var position=scrollitem.offset().top; $('body,html').animate({scrollTop:position-10},400); } }); })(jQuery); </script> <div id="contents-wrap"> <div id="accordion-42x" class="accordion-box"> <h3><img src="http://placehold.it/350x150" /></h3> <div class="accordion-block"> <p>アコーディオンで開くコンテンツ</p> </div> <h3><img src="http://placehold.it/350x150" /></h3> <div class="accordion-block"> <p>アコーディオンで開くコンテンツ</p> </div> </div> </div>
###補足
下記のコードでアコーディオンが上に開く動きは実現できましたが、上記コードの様にページ先頭にスクロールする動きが実現できませんでした。
<script type="text/javascript"> $(function(){ $(".acordion").hide(); $(".triger").click(function(){ $(".content").prev().slideToggle(); }); $(".acordion .close").click(function(){ $(".acordion").slideToggle(); $(".triger").parent().css("display","block"); }); }); </script> <div class="acordion"> <p class="close">close</p> <p><img src="http://placehold.it/650x150" /></p> </div> <div class="content"> <p class="triger"><img src="http://placehold.it/350x150" /></p> </div>
年末のお忙しい時期に大変恐縮ではございますが、ご教示いただけましたら幸いでございます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/31 02:08
2016/12/31 03:59
2016/12/31 06:45
2017/01/03 09:15
2017/01/03 10:09
2017/01/03 12:51