jQueryの.on(click)が上に記述した方のみ動かない

Question

解決させたいことは、以下のjQueryのクリックイベントの記述で、下の.look-triggerは動くのですが、
上に記述した.menu-triggerが動かなくなるのですが、両方動くベストな記述の方法をご教授いただけますでしょうか。

よろしくお願いします。

// toggle menu
$(document).on('click', '.menu-trigger', function(){
    $('html').toggleClass('active');
    return false;
});

// look 
$(document).on('click', '.look-trigger', function(){
    $('html').toggleClass('open');
    return false;
});

Answer 1

---

問題点

$(document).on('click', '.menu-trigger', function(){
    $('html').toggleClass('active');
    return false;  ← ここでreturn false;しているので、以降の処理がなにもされません。
});

// look 
$(document).on('click', '.look-trigger', function(){
    $('html').toggleClass('open');
    return false;
});

jQueryのreturn false;は、イベントの伝播と要素のイベント処理、両方を終わらせます。

詳しくは以下を読むとわかります。

jQeryイベント

以上のことを踏まえて、いかに解決策を書きます。

---

解決策

<a class="look-trigger" href="javascript:void(0);"></a>
<a class="menu-trigger" href="javascript:void(0);"><div id="menu-arrow"></div></a>

$('.menu-trigger').on('click', function(e){
    e.preventDefault();
    $('.look-trigger').toggleClass('active');
});
$('.look-trigger').on('click', function(e){
    e.preventDefault();
    $('#menu-arrow').toggleClass('open');
});

<a href="javascript:void(0);">
⇒こうするとデフォルトになにもしなく、なります。

$('.menu-trigger')
⇒クリックしたい要素をセレクターで拾います。

e.preventDefault();
⇒イベントをブラウザに通知しなくなります。
　aタグなら、hrefに遷移する動作をしなくなります。

Comments

[tama_yn0815]

もとになるHTMLを教えてくだされば、イベントの上手い処理を参考に投稿しますので、質問の内容に編集で追加してみてください。

[退会済みユーザー]

ご回答いただきありがとうございます。

両方のreturnを消してみたのですが、
menu-triggerをクリックしてもクラスが付与されなかったです。

以下のaタグをクリックでクラスを付けたいです。

よろしくお願いします。

<a class="look-trigger" href="#"></a>
<a class="menu-trigger" href="#"><div id="menu-arrow"></div></a>

[退会済みユーザー]

コードをご教授いただきありがとうございます。
無事、解決いたしました。

jQueryについて勉強します。
ありがとうございました。

[tama_yn0815]

ページみてみました。

やりたいのは、htmlをトグル化ですか？

[tama_yn0815]

あ、よかったｗｗ

[退会済みユーザー]

ありがとうございました！