状況
仕事で振られたタスクの処理。
↓↓↓
Railsアプリケーションでヘッダーにドロップダウン機能（dropdown）が動いているときに
他のリンクをクリックするとそのページに飛んでしまう（ロゴを押せばトップページに、フォーム画面だったとしたらボタンが押せてしまう等）ので防ぐ
言い換えればドロップダウンしてでてきた部分以外触る事が出来ず、
一度クリック動作をしてドロップダウンが引っ込んでから他をいじれるようにする。
http://black-flag.net/jquery/20110526-3128.html
参考↑
上の記事の様にリンク個別での処理ではなく、今回はbootstrapsを使っていて、
navbarタグを用いたヘッダーだったので
http://www.wivern.com/bootstrap/javascript.html#modals-events
参考↑
モバイル・デバイスでは、開いているドロップダウンは、正しい iOS サポートの必要から、メニューの外側をタップしたときにドロップダウンを閉じるためにタップ領域として .dropdown-backdrop を追加します。このことは、モバイルでは開いているドロップダウンから異なるドロップダウン・メニューに切り替えるには、余分にタップが必要であることを意味します。
こちらを参考にJsでコードを記述した。
Jsはprogate流し見しただけで自己判断でいじるのはほぼほぼ初の試み。
ソースコード
ヘッダーの変更だったので共通ファイルを一ついじれば他に適応するので楽だなぁ
<script type="text/javascript">
$(function(){
$('dropdown').on('show.bs.dropdown',function(event){
$("dropdown-backdrop").show();
});
$('dropdown').on('hidden.bs.dropdown',function(event){
$("dropdown-backdrop").css("display" , "none");
});
});
</script>
.
.
<% if current_member%>
<li class="nav-item dropdown">
<div class="dropdown-backdrop" style="display:none;"></div>
</li>
.
.
他に検索中みたのはこのbackdropは標準装備されてるのでしょうか？
dropdownをクラスに与えて使う事になる時に勝手に生成されるのでしょうか？ないのでしょうか？
よくわかりませんでした。
今回は無かったので自分で記述。
.dropdown-backdrop{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;}
解説
https://stackoverflow.com/questions/30925699/hide-bootstraps-dropdown-backdrop-css-only
↑参考
・view側でデフォルトとして該当のdivタグをstyleオプションにてdisplay:noneに設定してます。
・CSSにて該当のクラスを上下左右すべて 0 で設定し全体を覆うようにデザインしてます。（中身は何もないです）
・z-indexの数値はどこかのサイトにのっていた参考数値をそのまま張付けてみました。
・Jsの動きを口語にするとdropdownが表れれば、デフォルトでnoneにしているdivタグを.showで更新、dropdownがとじればサイドcssメソッドでnoneに更新してます
↓こちらに助けられました。
http://bootstrap3.cyberlab.info/javascript/dropdowns-events.html#
あとがき
紹介すればほんの短いコードですが正解にたどり着くのに2時間かかりました。
二時間後。。。
｛悲報！｝
問題発生：フッダーのリンクが押せてしまう
状況2
ドロップダウンしてでてきた部分以外触る事が出来ず、
一度クリック動作をしてドロップダウンが引っ込んでから他をいじれるようにする。
を目標に書いたきた
が、なぜかフッター部分だけいじれてしまう。
なんでや！！
試行錯誤しながら触っているとbackdropの数値を10000 と桁が違うほど上回るように書き換えたが反応なし。
逆にフッターnavbarのz-index数値をbackdrop（990）を下回るように書き換えると成功。
？？？？？？？？？？？？？
ますますわかんなくなりましたが結果的にアプローチは間違ってないなとおもいました。
原因究明
デベロッパーツールなど駆使した結果発見したのが、
前述した
今回はbootstrapsを使っていて、navbarタグを用いたヘッダーだったので
ここに謎解く肝がありました。
じつはフッターもnavbarクラスを使用していました。
両方ともbootstrapのnavbarを利用しており、それぞれ別のクラス名（例：fixed-top,fixed-bottom 等）も付随してつけてあったがそのクラスのCSS を確認してみると共通してz-indexの記述があり、同値であった。同値であったのだ。1030 !!
z-index:1030;
するとなにが起こるか。
https://app.codegrid.net/entry/z-index-1
↑参考（めちゃクちャ分かりやすかったです。全て書いてあります）
”一言であらわすとbackdropの親であるヘッダーのnavとフッターnavが同じスタックレベルにいるため”
だった。
該当のドロップダウン機能もヘッダー（navbarタグ）のなかにある（入れ子状態）なので、
dropdown-backdropのz-indexをどれだけ上げても反応なし。
逆にヘッダー側を少し下げただけでうまくいったのはフッターnavがヘッダーnavのz-index値を下回ったためであると考えられる。
あとがき２
その後の処理はどうしたのかかいてないがヘッダフッターに共通してあった1030という数値は
bootstrapを読み込んででてくるデフォルトの数値である為、
なるべくnav側の書き換えを行いたくない。
とのことで書き換えませんでした。
これまたJsでドロップダウンが表れている時はフッターの数値を1029にするなど、なんでもできます。
最初は自分用メモだったのが進めて行くうちに何故か人向けを意識しての敬語に。
駄文です。