JSにてとある要素クリック後に別の（親要素）要素のクラスを削除する方法

Question

http://tcd-wp.net/tcd028/
上記テーマをとあるスマホサイトに導入したのですが、メニューボタンを押し、メニュー項目のどれかをタップしたあとに、特定箇所まで(#でアンカーを指定して)スクロールするようにしたのですが、メニューが開きっぱなし担ってしまいます。

クリック後にメニューが閉じるようにするにはどうしたらよいのでしょうか。

http://qiita.com/NobuyaIshikawa/items/300739f6da6a95e58306
このあたりを試してみたのですが、JSが苦手で上手く出来ず…

おそらく div.navbar-collapse collapse in となっている要素のinを削除すれば非表示になるのかとおもうのですが…

宜しくお願い致します。

Answer 1

#jqueryが使える場合
$('.menu-item').on('click', function(){
  $('.navbar-collapse').removeClass('in')
})

#jqueryが使えない場合
var navBar = document.querySelector('.navbar-collapse')
document.querySelector('.menu-item').addEventListener('click', function(){
  navBar.classList.remove('in')
})

ではいかがでしょうか！
クリックのイベント用のclass（上の場合.menu-item）はお好きなように設定されて下さい！

Comments

[cutter]

ありがとうございます！
どうもinが消え無さそうですm(__)m
menu-itemがaタグではなくliタグだからでしょうか？

[MasakazuFukami]

menu-itemがliでもaタグでも動くはずなんですが、、、

javascriptの書き方にもよるのですが
>特定箇所まで(#でアンカーを指定して)スクロールするようにしたのですが、メニューが開きっぱなし担ってしまいます。
この処理と被ってそうですねー

[cutter]

スクロールする部分は、単純にaタグのアンカー指定を、JSのスルスルとスクロールするものでスクロールしているだけですので、特別なオリジナルのJSなどは入れていないのですが、ワードプレスなので他と干渉はありそうですね。。

[MasakazuFukami]

いえ、例えば、
<li class="menu-item">
<a>aa</a>
</li>
とある場合に、投稿者様が書いてるjavascriptが
aタグを押した場合に、「リンクはさせないし、親要素への伝播も止める」という記述をされている場合（stopPropagtation, preventDefaultなど）、
aタグを押してもそこでイベントの伝播は終了しli.menu-itemに設定しているclickイベントが発生しないという事が起きます。

ちなみにそのするするとスクロールするコードを貼っていただけないでしょうか

Answer 2

メニューのaタグのところに、

<a href="～～" onclick="document.querySelectorAll('.navbar-toggle')[0].click()">
```と入れると自動で閉まります。

提供していただいたサイトをchromeのデベロッパーツールでやりましたので、ほかのブラウザは分かりません。

Comments

[cutter]

ありがとうございます。
ワードプレスのカスタムメニューの改変が結構たいへんそうなのですが、試してみますm(__)m

[cutter]

add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);
function description_in_nav_menu($item_output, $item){
return preg_replace('/<a(.*?)\">/', '<a'.'$1' . "\" onclick=\"document.querySelectorAll('.navbar-toggle')[0].click()\">", $item_output);
}

上記をWPのfunctions.phpに追記して出来ました。
ありがとうございます！！