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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1554閲覧

スクロール時にクラスの追加処理がなかったことになる?!

5o5o_wagon

総合スコア214

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/24 08:32

#やりたいこと
リスト( .menu__item )を内包したあるスクロール領域( .menu )内で .button 押下時にその直下に要素( .text )を表示させて、スクロール領域( .menu )からはみ出している場合はちゃんと見える位置に自動でスクロールする。

###実現したい処理イメージ
button 押下時に以下の2つの処理が実行されるようにしたいです。
0. 押下した .button 直後の .text.is-show というclassを足して表示する。
0. もし押下した .button 直後の .text.menu 内で表示できない位置の場合、表示範囲内に収まるように自動でスクロールする。

(.text.box 以外をクリックした時にやっと消える。)

#問題
上に書いたような処理を期待してるのですが、現状以下の2つ問題が解決できません。

  • 2つ目のスクロールイベント時に1で行っている「 .text.is-show というclassを足して表示する」が一瞬表示されるがすぐに消える( .is-show というclassも無くなっている)。※そもそも手動スクロール時も消えてしまう。
  • .button 押下時の .box の高さとスクロール位置をちゃんと考慮して .text がギリギリちゃんと見える位置まで自動でスクロールする。

#ソースコード

html

1<ul class="menu"> 2 <li class="menu__item"> 3 <div class="box"> 4 <button type="button" class="button">ボタン</button> 5 <p class="text">テキスト</p> 6 </div> 7 </li> 8 <li class="menu__item"> 9 <div class="box"> 10 <button type="button" class="button">ボタン</button> 11 <p class="text">テキスト</p> 12 </div> 13 </li> 14 <li class="menu__item"> 15 <div class="box"> 16 <button type="button" class="button">ボタン</button> 17 <p class="text">テキスト</p> 18 </div> 19 </li> 20</ul>

css

1.menu { 2 width: 600px; 3 height: 180px; 4 overflow-y: auto; 5 overflow-x: hidden; 6} 7.menu__item { 8 height: 80px; 9} 10.box { 11 position: relative; 12 width: 40px; 13 height: 40px; 14} 15.button { 16 width: 40px; 17 height: 40px; 18} 19.text { 20 display: none; 21 position: absolute; 22 top: 40px; 23 left: 0; 24 width: 200px; 25} 26.text.is-show { 27 display: block; 28}

javascript

1 2// buttonをクリックしたらtextが現れて見える位置の方向にスクロールする 3$(function(){ 4 $('.button').on('click', function(){ 5 var a = $('.menu').scrollTop(); 6 var b = a + 40; 7 var c = a - 40; 8 var d = $(this).parents('.menu__item').position().top; 9 if(d > 60){ 10 $('.menu').animate({scrollTop:b}); 11 } else if (d <= 0){ 12 $('.menu').animate({scrollTop:c}); 13 } 14 var $e = $(this).next('.text'); 15 if(!$e.hasClass('is-show')) { 16 $e.addClass('is-show'); 17 } 18 }); 19 $(document).on('click', function(e){ 20 if($('.text').hasClass('is-show') && !$.contains($('.text.is-show').parent('.box')[0], e.target)) { 21 $('.text.is-show').removeClass('is-show'); 22 } 23 }); 24}); 25

※ソースコードは自分で必要最低限だと思った部分だけを記載しています。

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは

消える出ない理由は

javascript

1if($('.text').hasClass('is-show') && !$.contains($('.text.is-show').parent('.box')[0], e.target)) { 2 $('.text.is-show').removeClass('is-show'); 3}

上記で消されてます。

簡単に対応するなら

javascript

1 var $e = $(this).next('.text'); 2 $('.text.is-show').removeClass('is-show');//追加 3 $(document).on('click', function(e){ });//削除

ですかね。

解説追記
現状:
clickに対して2つの処理を記載されています。
$('.button').on('click', function(){});addする(buttonクラスをもってる要素に対して)
$(document).on('click', function(e){});removeするもの探して消す(documentに内包されている要素すべてに対して)

どっちが先に処理されるでしょうか!?

javascript

1//クリックされた対象の次の要素をつっこんでますよね? 2var $e = $(this).next('.text'); 3 4//対象がis-showクラス持ってなかったらaddしてますよね? 5if(!$e.hasClass('is-show')) { 6 $e.addClass('is-show'); 7}); 8 9$(document).on('click', function(e){//はしょってます 10 //.text.is-showを持っている要素に対して全部removeしてますよね? 11 $('.text.is-show').removeClass('is-show');

var $e = $(this).next('.text');//対象詰める
$('.text.is-show').removeClass('is-show');//一回全部消す
$e.addClass('is-show');//対象の要素にだけaddする

全部載せると

javascript

1 $('.button').on('click', function(){ 2 var a = $('.menu').scrollTop(); 3 var b = a + 40; 4 var c = a - 40; 5 var d = $(this).parents('.menu__item').position().top; 6 if(d > 60){ 7 $('.menu').animate({scrollTop:b}); 8 } else if (d <= 0){ 9 $('.menu').animate({scrollTop:c}); 10 } 11 var $e = $(this).next('.text'); 12 $('.text.is-show').removeClass('is-show'); 13 $e.addClass('is-show'); 14 });

これだけ

投稿2016/06/24 10:43

編集2016/06/24 11:20
kogure

総合スコア299

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

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

5o5o_wagon

2016/06/24 10:48

早速のご回答ありがとうございます! まだ提示いただいたコードの理解が追いついてないですが、まず参考にいじってみます。
kogure

2016/06/24 11:20

コメント追記と全体も突っ込んでみました。
5o5o_wagon

2016/06/24 12:17 編集

ありがとうございます!さらに詳しい回答ありがとうございます!見てみます!
5o5o_wagon

2016/06/28 11:59

返信おくれて申し訳ありません! ご提示頂いたコードの流れで解決できました! クリックイベントの処理が整理できていませんでした。。 ご丁寧な回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問