jQueryで作ったドロワーメニューがうまくいかない。

Question

ハンバーバーボタンを押すと、くるっと回って、
不透明な背景がふわっと出て。もう一度押すとくるっと回って、不透明な背景がふわっと消えるようにしたいのですが、下記のようにうまくいきません。
どこに問題があると思われますか？

https://jsfiddle.net/80od313c/20/

Answer 1

• バインドの仕方に無駄がある。
• 基本的に同じ要素に設定された同じきっかけのイベントは、同時に全て実行されます（1つの要素に3つのクリックイベントが関連付けられていれば、3つまとめて実行される）

― modal-button-wrap__button span にtransistionを設定する。

整理すると下記のようになりました。
https://jsfiddle.net/ktLmrfw7/7/

基本は下記の形です。

• 取得したオブジェクトを変数に代入。基本的に対象の操作はこの変数を利用して行う。
• 全体を1つの関数にまとめ、ロード時にはその関数1つを実行する形にする。
• さらにその中で、イベント時に行う操作については1つ1つ関数にまとめる（A）
• イベントの設定としては、任意のタイミングでAの関数を利用する。

https://jsfiddle.net/990Lc4z3/3/

さらに、関数の一つ一つを連想配列形式にまとめなおしたものが出来上がりの形です。
まずは基本形についての把握をお願いします。

Comments

[退会済みユーザー]

確かにトグルを使えばもっと減らせます。

[退会済みユーザー]

同じ要素に同じイベントファンクションがついている場合は、順番どおりの実行にならず、
両方ともいっぺんに実行されてしまうので、回って戻っていることが人間の目には見えないのですね。

.toggleClass()は
.toggleClassは指定したclassが無ければ付ける、指定したclassが付いていれば外すといった処理のようですが、クリックファンクションを実行する要素が、
たくさんある場合はどうしたらよいのでしょうか？

・下記のようにしてもうまくいきません。
<script>
$(function(){
$('.kuruttosuru, .overlay-haikeikurokari, #maware, .link-block , .showMenue, .modal-button-wrap, .modal-button-wrap__button').on('click', function() {
$('.kuruttosuru').toggleClass('active');
});
});
</script>

[yamato_hikawa]

イベントは子から親へ伝搬（バブリング）するので、発生してほしい部分が囲われている場合、一番最上位の親につければいいです。

たとえば、ul全体とli、両方ともに同じクリックイベントを設定する場合、ulだけにイベントを設定すれば、li要素をクリックしてもイベントが発生するようになります。

それを利用して、イベントのバインド箇所を最小限にしてみてください。

[退会済みユーザー]

ありがとうございます。

下記ならmodal-button-wrapのみセレクタに入れればその子要素どれをクリックしても実行されるのですね。

<!-- drawermenu-button -->
<div class="modal-button-wrap">
<a class="animation-hover action-hover modal-button-wrap__button kuruttosuru">
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
</a>
</div>

また、やっていただいたものは確かに完璧にできているのですが、
初心者の私にはまだわかりません。
もう少し初心者にわかるように教えていただければ幸いです。

[退会済みユーザー]

その後、自分で変更し、ある程度はできたのですが、
liを押しても、背景の黒い部分が、消えないバグのみが残ってしまいました。
理由はわかりますでしょうか？

https://jsfiddle.net/80od313c/22/

[退会済みユーザー]

その後、自分で変更し、ある程度はできたのですが、
liを押しても、ハンバーガーメニューが回らないバグのみが残ってしまいました。
理由はわかりますでしょうか？

新しく質問しましたので、お時間があればお願いします。

Answer 2

$(function(){
	$('.kuruttosuru').on('click', function() {
		$('.kuruttosuru').addClass('active');
	});
});

↑この部分でactiveがついた後に、↓この部分で消えているからだと思います。

$(function(){
	$(document).on('click', '.overlay-haikeikurokari, #maware, .link-block , .showMenue, .modal-button-wrap, .modal-button-wrap__button', function(){ 
		//ulをクリックすると、メニューが戻る
		$('.kuruttosuru').removeClass('active');
		// $(this).off('click');
	});
});

Comments

[退会済みユーザー]

ありがとうございます。早速確認してみます。

[退会済みユーザー]

.toggleClass()は
.toggleClassは指定したclassが無ければ付ける、指定したclassが付いていれば外すといった処理のようですが、クリックファンクションを実行する要素が、
たくさんある場合はどうしたらよいのでしょうか？

・下記のようにしてもうまくいきません。
<script>
$(function(){
$('.kuruttosuru, .overlay-haikeikurokari, #maware, .link-block , .showMenue, .modal-button-wrap, .modal-button-wrap__button').on('click', function() {
$('.kuruttosuru').toggleClass('active');
});
});
</script>

[退会済みユーザー]

同じ要素に同じイベントファンクションがついている場合は、順番どおりの実行にならず、
両方ともいっぺんに実行されてしまうので、回って戻っていることが人間の目には見えないのですね。

[Lhankor_Mhy]

$(function(){
$('.kuruttosuru, .overlay-haikeikurokari, #maware, .link-block , .showMenue, .modal-button-wrap, .modal-button-wrap__button').on('click', function(e) {
$('.kuruttosuru').toggleClass('active');
e.stopPropagation();
});
});
としたらどうなりますか？

[退会済みユーザー]

何度もありがとうございます。残念ながら完璧にはなりません。
始まりのボタンと終了のボタンが違う場合はどうすればいいのですかね。

下記のようになりました。
https://jsfiddle.net/80od313c/21/

[退会済みユーザー]

その後、自分で変更し、ある程度はできたのですが、
liを押しても、背景の黒い部分が、消えないバグのみが残ってしまいました。
理由はわかりますでしょうか？

https://jsfiddle.net/80od313c/22/