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

Question

<div class="one">
	<div class="two"></div>
</div>

.one{
	position: relative;
	width: 50px;
	height: 50px;
	background: red;
}

.two{
	position: absolute;
	top: 100%;
	left: 0;
	width: 50px;
	height: 50px;
	background: blue;
}

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

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

Answer 1

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

1案

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

$('.one').click(function(e){
    if(this === e.target) {
      $('.two').slideToggle();
    }      
});

• 動作確認用： https://jsfiddle.net/jun68ykt/69pw75j3/2/

　　

2案

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

$('.one').click(function(e) {
     $('.two').slideToggle();
});

$('.two').css('pointer-events', 'none');

• 動作確認用： https://jsfiddle.net/jun68ykt/9f6tb0sq/1/

3案

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

$('.one').click(function(e) {
     $('.two').slideToggle();
});

$('.two').click(function(e){
     e.stopPropagation();
});

• 動作確認用： https://jsfiddle.net/jun68ykt/19ovbj5u/1/

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

Comments

[退会済みユーザー]

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

[jun68ykt]

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

Answer 2

正解

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

Comments

[退会済みユーザー]

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