外部メニューをクリックするとトグルクラスを削除する方法

Question

ドロップダウンメニューは、JSから追加された "is-open"というクラスを使用してCSSとHTML/JSで設計されています。指定されたHTML div内に存在すると、CSSをアクティブにしてサブメニューを表示します。

ただし、クリックしたドロップダウンメニューは、同じメニュー項目をクリックしない限り消えないという小さな問題があります。

基本機能として、このメニューは、ユーザーがメニュー上でクリックすると消える必要がありますが、ページ上のどこにでも表示されます。

私の現在のjavascriptは以下の通りである。ここでは

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
     e.stopPropagation(); 
     if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
     } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
     } 
    }); 
}); 

は、コードのcodepen例です：https://codepen.io/anon/pen/EwMjrz

Answer 1

あなたはとても

のようなあなたのメニューを閉じるには、ドキュメントにイベントリスナーを追加することができます

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
    e.stopPropagation(); 
    if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
    } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
    } 
    }); 
    $(document).on('click', function (e) { 
    e.stopPropagation(); 
    $('.has-submenu').removeClass("is-open"); 
    }); 
}); 

これはトリックを行う必要があります！