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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

2回答

1605閲覧

jQueryのクリックの範囲を制限したい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2019/08/24 15:38

html

1<div class="one"> 2 <div class="two"></div> 3</div>

css

1.one{ 2 position: relative; 3 width: 50px; 4 height: 50px; 5 background: red; 6} 7 8.two{ 9 position: absolute; 10 top: 100%; 11 left: 0; 12 width: 50px; 13 height: 50px; 14 background: blue; 15}

javascript

1$('.one').click(function(){ 2 $('.two').slideToggle(); 3});

webサイトにアニメーションを加えたいのですが、行き詰まったので質問させていただきます。上のコードを実行すると、oneがクリックされたときに、twoが出たり引っ込んだりします。しかし、twoが出ている状態で、twoをクリックしたときもtwoが引っ込んでしまいます。今回、twoを除いたoneだけをクリック判定の対象としたい(twoをクリックしても何も起こらないようにしたい)のですが、どうすればよろしいでしょうか?htmlやcssを書き換えればうまくいくと思いますが、できればjavascriptだけを変更してどうにかしたいです...雑な文章ですが、どうか回答お願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

こんにちは
3つ考えました。

1案

ご質問のコードに、 .two を slideToggleさせる if 条件を追加するものです。

javascript

1$('.one').click(function(e){ 2 if(this === e.target) { 3 $('.two').slideToggle(); 4 } 5});

  

2案

これは、JSのコードからスタイルを追加する方法になります。

javascript

1$('.one').click(function(e) { 2 $('.two').slideToggle(); 3}); 4 5$('.two').css('pointer-events', 'none');

3案

.two で発生したclickイベントが .one に伝搬されるのを抑止します。

javascript

1$('.one').click(function(e) { 2 $('.two').slideToggle(); 3}); 4 5$('.two').click(function(e){ 6 e.stopPropagation(); 7});

以上参考になれば幸いです。

投稿2019/08/24 15:46

編集2019/08/24 17:08
jun68ykt

総合スコア9058

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

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

退会済みユーザー

退会済みユーザー

2019/08/24 17:24

3つも案を考えていただきありがとうございます!3案が一番使いやすいと思ったので、(実際にはoneには画像などが含まれているため、1案は使いにくい。また、間接的とはいえcssは書き換えたくないから2案は避けておきたいから)3案を使わせていただきます。 どの案も思いつかなかったので、参考になりました!
jun68ykt

2019/08/25 00:33

どういたしまして。解決されたようで、よかったです ????
guest

0

正解

js

1$('.one').click(function(e) { 2 $(e.target).find('.two').slideToggle(); 3});

投稿2019/08/24 15:58

yasutomi

総合スコア2937

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

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

退会済みユーザー

退会済みユーザー

2019/08/24 17:30

回答ありがとうございます!findで判定する方法は思いつかなかったので、参考になりました。もしよければまたいつかよろしくお願いします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問