質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2038閲覧

[JQuery]アコーディオンで展開しつつコンテンツのトップへスクロール

MitsuhiroUehara

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/11 06:22

編集2018/09/11 06:25

前提・実現したいこと

アコーディオンメニューを展開しつつ、表示されたコンテンツのトップへスクロールさせたいと考えています。
アコーディオンを開閉させるボタンがそれぞれ2カ所あり、どちらも同じ挙動をさせたいです。
もともと開閉するだけで運用しており、スクロールの動きを追加しようと試してみたのですが、オンクリックで複数の動きをさせることができず、行き詰まってしまいました。
JSなどのプログラム言語は、書いてあることがなんとなく分かる程度です。
大変恐縮ですが、ご教示のほどよろしくお願いいたします。

該当のソースコード

[HTML]

HTML

1<section> 2<div> 3<div class="rec03_nbox acd_b" data-target="acd_cnt01"><a href="#rec03_01" data-scroll>バナー01</a></div> 4<div class="rec03_nbox acd_b" data-target="acd_cnt02"><a href="#rec03_02" data-scroll>バナー02</a></div> 5<div class="rec03_nbox acd_b" data-target="acd_cnt03"><a href="#rec03_03" data-scroll>バナー03</a></div> 6<div class="rec03_nbox acd_b" data-target="acd_cnt04"><a href="#rec03_04" data-scroll>バナー04</a></div> 7</div> 8 9<div id="rec03_main"> 10<div id="accordion-43x" class="w1000 accordion-box clear"> 11<dl> 12<dt id="rec03_01" class="acd_b" data-target="acd_cnt01" name="rec03_01">コンテンツ1タイトル</dt> 13<dd id="acd_cnt01" class="acd_cnt"> 14 <div> 15 <p>コンテンツ1</p> 16 </div> 17</dd> 18 19<dt id="rec03_02" class="acd_b" data-target="acd_cnt02">コンテンツ2タイトル</dt> 20<dd id="acd_cnt02" class="acd_cnt"> 21 <div> 22 <p>コンテンツ2</p> 23 </div> 24</dd> 25 26<dt id="rec03_03" class="rec03_b acd_b" data-target="acd_cnt03">コンテンツ3タイトル</dt> 27<dd id="acd_cnt03" class="acd_cnt"> 28 <div> 29 <p>コンテンツ3</p> 30 </div> 31</dd> 32 33<dt id="rec03_04" class="rec03_b acd_b" data-target="acd_cnt04">コンテンツ4タイトル</dt> 34<dd id="acd_cnt04" class="acd_cnt"> 35 <div> 36 <p>コンテンツ4</p> 37 </div> 38</dd> 39</dl> 40 41</div> 42</div> 43</section>

[CSS]

CSS

1.acd_b { 2 cursor: pointer; 3 color: #777 ; 4} 5 6dd.acd_cnt { 7 display: none ; 8}

[JS]※JQuery1.10.1使用

js

1<script> 2$(function(){ 3 $('[data-scroll]').on('click', function() { 4 var speed = 500, 5 $self = $(this), 6 $href = $self.attr('href'), 7 $margin = $self.attr('data-scroll') ? parseInt($self.attr('data-scroll')) : 0, 8 $target = $($href); 9 var pos = ( $target[0] && $target !== '#page_top' ) ? $target.offset().top - $margin : 0; 10 $('html,body').animate({scrollTop: pos}, speed, 'swing'); 11 $self.blur(); 12 return false; 13 });// end function.onClick 14});// end function 15</script> 16<script> 17$(function() 18{ 19 $('.acd_b').click( function() 20 { 21 // [data-target]の属性値を代入する 22 var target = $( this ).data( 'target' ) ; 23 // [target]と同じ名前のIDを持つ要素に[slideToggle()]を実行する 24 $( '#' + target ).slideToggle("slow").scroll() ; 25 //scroll-accordion-top 26 function scroll_top(scrollitem){ 27 28 var position=scrollitem.offset().top; 29 $('body,html').animate({scrollTop:position-10},400); 30 31 } 32 return false; 33 } ) ; 34}) ; 35</script>

試したこと

一度のオンクリックに対して、複数の動きができればと思い、組み合わせをいろいろ試してみましたが、スクロールだけが機能するか全く動かないかのどちらになることが多いです。
上記のJSは参考にさせていただいたスクリプトをやりたいことが分かるよう、元の形で別々にしてあります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

該当のソースコードのスクロール処理のセレクタが間違っていませんか?

JavaScript

1//誤 2$('[data-scroll]').on('click', function() { 3}); 4 5//正 6$('.acd_b').on('click', function() { 7});

一度のオンクリックイベントでも処理ができます。

JavaScript

1 2$(function() 3{ 4 $('.acd_b').click( function() 5 { 6 var speed = 500, 7 $self = $(this), 8 $href = $self.attr('href'), 9 $margin = $self.attr('data-scroll') ? parseInt($self.attr('data-scroll')) : 0, 10 $target = $($href); 11 12 var pos = ( $target[0] && $target !== '#page_top' ) ? $target.offset().top - $margin : 0; 13 $('html,body').animate({scrollTop: pos}, speed, 'swing'); 14 $self.blur(); 15 16 // [data-target]の属性値を代入する 17 var target = $( this ).data( 'target' ) ; 18 // [target]と同じ名前のIDを持つ要素に[slideToggle()]を実行する 19 $( '#' + target ).slideToggle("slow").scroll() ; 20 //scroll-accordion-top 21 function scroll_top(scrollitem){ 22 23 var position=scrollitem.offset().top; 24 $('body,html').animate({scrollTop:position-10},400); 25 26 } 27 28 return false; 29 } ) ; 30}) ; 31

できなかった理由は、スクロール処理の後にreturn false;をして、その後に開閉処理を書いたとか?
return false;するとその時点で処理が終わり、以降の処理は行われません。
(違ったら、すみません;;)

投稿2018/09/11 09:42

rina

総合スコア54

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MitsuhiroUehara

2018/09/12 02:05

ご回答ありがとうございます! アドバイスいただいたセレクタについて、今まで複数要素に対して動きの指定をしていたのをHTML側でひとつのタグにまとめたところ、希望通りの動きになりました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問