こんなんはどないです？
menu_open()関数の引数を以下のように拡張します。
第1引数： toggledItemSelector --- 第2引数で与えるCSSクラスをトグルしたい要素のセレクタ
第2引数： toggledClass --- 第1引数のセレクタに該当する要素に対してトグルしたいCSSクラス
残余引数： ...triggerSelectors --- トグルを行うトリガーとなる（クリッカブルな）要素のセレクタ群
この引数の仕様変更によって、質問にあるmenu_open()の呼び出し例も、以下のように変わります。
diff
1 - menu_open(".header__nav-btn", ".cover-darken", ".js-open");
2 + menu_open(".js-open", "is-opened", ".header__nav-btn", ".cover-darken");
以下は、この仕様の実装例です。
javascript
1 function menu_open ( toggledItemSelector , toggledClass , ... triggerSelectors ) {
2 // CSSクラスをトグルする対象要素を特定する。（与えられたセレクタで複数要素が該当しても先頭要素のみを対象にする。これは既存を踏襲）
3 const toggledItem = document . querySelector ( toggledItemSelector ) ;
4 if ( ! toggledItem ) return ;
5
6 // CSSクラスをトグルする関数
7 const handleToggle = ( ) => {
8 toggledItem . classList . toggle ( toggledClass ) ;
9 }
10
11 // トグル実行のトリガーとなる要素に、トグルを実行する関数をaddEventListenerする。
12 triggerSelectors . forEach ( selector => {
13 [ ... document . querySelectorAll ( selector ) ] . forEach ( triggerElm => {
14 triggerElm . addEventListener ( 'click' , handleToggle ) ;
15 } )
16 } ) ;
17 }
➡ 上記を使ったサンプル
上記のサンプルでも確認できるように、
トグルを実行する対象を、残余引数で受け取ることで、何個でもセレクタを指定できます。
また、
トリガー指定のあるセレクタに、複数の要素が該当した場合（たとえば上記のサンプルでは、.B ボタン は二つあります。）、そのすべてに、クリックハンドラとして、トグル実行の関数をクリックリスナーとして設定します。
補足：
上記の修正だと、トグルするCSSクラス名("is-open")も引数で与えるため、関数名のmenu_open()も変える必要がありそうです。たとえばaddClassToggleOnTriggers()
のような名前になるかと思います。
別案1
jQueryもどきを自作してみる、っていうのはどうでしょう？ たとえば
javascript
1 ( function ( ) {
2
3 function myQuery ( selector ) {
4 const nodeList = document . querySelectorAll ( selector ) ;
5 return new myQuery . __clazz__ ( nodeList ) ;
6 }
7
8 myQuery . __clazz__ = class {
9
10 constructor ( nodeList ) {
11 this . nodeList = nodeList ;
12 }
13
14 on ( eventType , handler ) {
15 this . nodeList . forEach ( node => {
16 node . addEventListener ( eventType , handler ) ;
17 } ) ;
18 }
19
20 toggleClass ( cssClass ) {
21 this . nodeList . forEach ( node => {
22 if ( node . classList ) {
23 node . classList . toggle ( cssClass ) ;
24 }
25 } ) ;
26 }
27 }
28
29 window . $ = myQuery ;
30 } ) ( ) ;
31
ってなものを作っておいて、質問にある例に適用するならば、
javascript
1 $ ( '.header__nav-btn, .cover-darken' ) . on ( 'click' , function ( ) {
2 $ ( '.js-open' ) . toggleClass ( 'is-opened' ) ;
3 } ) ;
とすると。
先のサンプルに対して、このjQueryもどきを使うと、こんなん。➡ サンプル2
ですが、こんな怪しげなまがいものを自作して、プチJohn Resig になった自己満足に浸るヒマがあったら、本物 を使えるようになったほうが断然いいです。ということで、別案を提示するつもりが、質問の本題からはそれて、「jQueryを覚えてみては？」というのが結論になってしまいました。申し訳ありません。
別案2
この回答のはじめに挙げた
menu_open()関数の引数を以下のように拡張します。
・第1引数： toggledItemSelector --- 第2引数で与えるCSSクラスをトグルしたい要素のセレクタtoggledClass --- 第1引数のセレクタに該当する要素に対してトグルしたいCSSクラス...triggerSelectors --- トグルを行うトリガーとなる（クリッカブルな）要素のセレクタ群
という提案を修正した案を挙げておきます。どこを修正するかというと、
・残余引数： ...triggerSelectors --- トグルを行うトリガーとなる（クリッカブルな）要素のセレクタ群
の部分です。ここを残余引数で渡すのではなく、ひとつのセレクタの文字列で渡すことができます。というのは、セレクタの文法で、複数のセレクタのOR結合は、カンマ(,)で区切れば実現できるからです。
また先に書いたように、関数名を addClassToggleOnTriggers に修正します。以下はこの修正によるコードです。
javascript
1 function addClassToggleOnTriggers ( toggledItemSelector , toggledClass , triggerSelector ) {
2 // CSSクラスをトグルする対象要素を特定する。（与えられたセレクタで複数要素が該当しても先頭要素のみを対象にする。これは既存を踏襲）
3 const toggledItem = document . querySelector ( toggledItemSelector ) ;
4 if ( ! toggledItem ) return ;
5
6 // CSSクラスをトグルする関数
7 const handleToggle = ( ) => {
8 toggledItem . classList . toggle ( toggledClass ) ;
9 }
10
11 // トグル実行のトリガーとなる要素に、トグルを実行する関数をaddEventListenerする。
12 document . querySelectorAll ( triggerSelector ) . forEach ( triggerElm => {
13 triggerElm . addEventListener ( 'click' , handleToggle ) ;
14 } ) ;
15 }
質問にある例に適用するには
javascript
1 addClassToggleOnTriggers ( '.js-open' , 'is-opened' , '.header__nav-btn, .cover-darken' ) ;
とします。➡ サンプル3
コメントに対する回答
コメントへ回答するために、以下のサンプルで説明します。（下記のHTMLを丸ごとコピペしてHTMLファイルを作り、ブラウザで表示させてご確認ください）
html
1 <! DOCTYPE html >
2 < html lang = " ja " >
3 < head >
4 < meta charset = " UTF-8 " >
5 < title > 362305@teratail </ title >
6 < style >
7 .root { width : 510 px ; }
8 body > .container { padding-left : 10 px ; }
9 body > .container > .container { padding-left : 30 px ; }
10 body > .container > .container > .container { padding-left : 50 px ; }
11 body > .container > .container > .container > .container { padding-left : 70 px ; }
12
13 .header__nav-btn , .cover-darken { margin-bottom : 15 px ; height : 36 px ; display : flex ; align-items : center ; padding-left : 5 px ; font-size : 16 pt ; cursor : pointer ; color : white ; }
14 .header__nav-btn { background-color : red ; }
15 .cover-darken { background-color : blue ; }
16
17 .result {
18 display : flex ;
19 align-items : center ;
20 justify-content : center ;
21 width : 520 px ;
22 height : 60 px ;
23 text-align : center ;
24 font-size : 20 pt ;
25 background-color : yellow ;
26 }
27
28 .js-open :after {
29 content : 'is-opened: No'
30 }
31
32 .js-open .is-opened :after {
33 content : 'is-opened: Yes'
34 }
35
36 </ style >
37 < script >
38 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
39
40 function addClassToggleOnTriggers ( toggledItemSelector , toggledClass , triggerSelector ) {
41
42 // CSSクラスをトグルする対象要素を特定する。（与えられたセレクタで複数要素が該当しても先頭要素のみを対象にする。これは既存を踏襲）
43 const toggledItem = document . querySelector ( toggledItemSelector ) ;
44 if ( ! toggledItem ) return ;
45
46 // CSSクラスをトグルする関数
47 const handleToggle = ( ) => {
48 toggledItem . classList . toggle ( toggledClass ) ;
49 }
50
51 // トグル実行のトリガーとなる要素に、トグルを実行する関数をaddEventListenerする。
52 document . querySelectorAll ( triggerSelector ) . forEach ( triggerElm => {
53 console . log ( triggerElm . textContent ) ;
54 triggerElm . addEventListener ( 'click' , handleToggle ) ;
55 } ) ;
56 }
57
58 addClassToggleOnTriggers ( '.js-open' , 'is-opened' , '.header__nav-btn, .cover-darken' ) ;
59 } )
60 </ script >
61 </ head >
62 < body >
63
64 < div class = " container root " >
65 < div class = " cover-darken " > 1 </ div >
66 < div class = " header__nav-btn " > 2 </ div >
67 < div class = " container " >
68 < div class = " header__nav-btn " > 4 </ div >
69 < div class = " header__nav-btn " > 5 </ div >
70 < div class = " container " >
71 < div class = " cover-darken " > 9 </ div >
72 < div class = " header__nav-btn " > 10 </ div >
73 < div class = " container " >
74 < div class = " cover-darken " > 12 </ div >
75 </ div >
76 </ div >
77 < div class = " cover-darken " > 6 </ div >
78 </ div >
79 < div class = " container " >
80 < div class = " container " >
81 < div class = " cover-darken " > 11 </ div >
82 </ div >
83 < div class = " header__nav-btn " > 7 </ div >
84 < div class = " header__nav-btn " > 8 </ div >
85 </ div >
86 < div class = " cover-darken " > 3 </ div >
87 </ div >
88
89 < div class = " result " >
90 < div class = " js-open is-opened " > </ div >
91 </ div >
92
93 </ body >
94 </ html >
95
96
上記のHTMLをブラウザで表示させると以下のようになります。
赤い矩形は .header__nav-btn です。青い矩形は .cover-darken です。
赤または青の矩形をクリックすると、黄色の矩形の中のテキストが、is-opened: Yes と is-opened: No とを切り替えます。
赤と青の矩形の左端に、白い数字が書かれています。数字の規則は以下です。
・ 同じ深さにある矩形は、連続した数字がふられます。
Javascriptの中に
javascript
1 // トグル実行のトリガーとなる要素に、トグルを実行する関数をaddEventListenerする。
2 document . querySelectorAll ( triggerSelector ) . forEach ( triggerElm => {
3 console . log ( triggerElm . textContent ) ;
4 triggerElm . addEventListener ( 'click' , handleToggle ) ;
5 } ) ;
というコードがありますが、これの triggerSelector に渡されるセレクターの文字列は'.header__nav-btn, .cover-darken'.header__nav-btn と .cover-darkenをカンマ区切りで並べたセレクタリスト です。
また、forEach に渡している関数の中で
javascript
1 console . log ( triggerElm . textContent ) ;
で、triggerElm のテキスト内容を出力させています。以下はこれによって出力されたログです。
これは、querySelectorAll('.header__nav-btn, .cover-darken') で取得される要素のリストに、どのような順番で要素が並んでいるかを表しています。
この取り出される順番について、querySelectorAllの仕様の確認をすると、W3CのSelectors API のドキュメントに以下の記述があります。
6.2. Finding Elements
・・・
とあり、この中の "in document order" のリンク先に、以下の一文があります。
The term document order means a depth-first pre-order traversal of the DOM tree or subtree in question.
この中にある、 depth-first で pre-order なDOMツリーの巡回をした結果が、先ほどの以下です。
depth-first で pre-order なツリーの巡回というのは、絵で説明すると、以下のような順序でノードをたどる辿り方です。
なお、depth-first （深さ優先）に対照的な辿り方は、breadth-first (幅優先）で、pre-order に対照される辿り方には in-order や post-order があります。ご興味あれば調べてみるとよいかもしれません。
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/06 12:44
2021/10/07 03:08