前提・実現したいこと
FlaskでWebアプリを作成しています。
発生している問題・エラーメッセージ
Bootstrap4を使ってドロップダウンリストを作ったのですが、liタグ内のaタグをクリックしてもリンク先に飛びません。ただ、aタグ上にマウスを合わせるとカーソルが変化しますし、左クリックするとactive状態になって背景色が変わります。また、「右クリック->新しいタブで開く」とすれば目的のページが開きます。ページ遷移だけが起こらないという状況です。
※以下に示すコードのaタグの.disabled
はJavascriptにより適当に取り除きます。
該当のソースコード
以下のコードではhrefが指定されたどのaタグを左クリックしても遷移しません。
HTML
1<li class="nav-item dropdown"> 2 <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</a> 3 <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> 4 {% for year in list_of_year %} 5 <li class="dropdown-submenu"> 6 <a href="#" role="button" class="dropdown-toggle dropdown-item" id="list{{year}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{year}}</a> 7 <ul class="dropdown-menu" aria-labelledby="list{{year}}"> 8 <li><a class="dropdown-item disabled" href="/month/{{year}}/January" id="list{{year}}01" method="get">January</a></li> 9 <li><a class="dropdown-item disabled" href="/month/{{year}}/February" id="list{{year}}02" method="get">February</a></li> 10 <li><a class="dropdown-item disabled" href="/month/{{year}}/March" id="list{{year}}03" method="get">March</a></li> 11 <li><a class="dropdown-item disabled" href="/month/{{year}}/April" id="list{{year}}04" method="get">April</a></li> 12 <li><a class="dropdown-item disabled" href="/month/{{year}}/May" id="list{{year}}05" method="get">May</a></li> 13 <li><a class="dropdown-item disabled" href="/month/{{year}}/June" id="list{{year}}06" method="get">June</a></li> 14 <li><a class="dropdown-item disabled" href="/month/{{year}}/July" id="list{{year}}07" method="get">July</a></li> 15 <li><a class="dropdown-item disabled" href="/month/{{year}}/August" id="list{{year}}08" method="get">August</a></li> 16 <li><a class="dropdown-item disabled" href="/month/{{year}}/September" id="list{{year}}09" method="get">September</a></li> 17 <li><a class="dropdown-item disabled" href="/month/{{year}}/October" id="list{{year}}10" method="get">October</a></li> 18 <li><a class="dropdown-item disabled" href="/month/{{year}}/November" id="list{{year}}11" method="get">November</a></li> 19 <li><a class="dropdown-item disabled" href="/month/{{year}}/December" id="list{{year}}12" method="get">December</a></li> 20 </ul> 21 </li> 22 {% endfor %} 23 </ul> 24</li>
Bootstrap4以外には以下が適用されています。
CSS
1.dropdown-submenu { 2 position: relative; 3} 4 5.dropdown-submenu a::after { 6 transform: rotate(-90deg); 7 position: absolute; 8 right: 6px; 9 top: .8em; 10} 11 12.dropdown-submenu .dropdown-menu { 13 top: 0; 14 left: 100%; 15 margin-left: .1rem; 16 margin-right: .1rem; 17}
Javascript
1$('.dropdown-menu a.dropdown-toggle').on('click', function(e) { 2 if (!$(this).next().hasClass('show')) { 3 $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); 4 } 5 var $subMenu = $(this).next(".dropdown-menu"); 6 $subMenu.toggleClass('show'); 7 8 9 $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { 10 $('.dropdown-submenu .show').removeClass("show"); 11 }); 12 13 14 return false; 15});
試したこと
上のHTMLのコードとほぼ変わりませんが、試しにliタグ外にaタグを配置し、追加したaタグを左クリックすると目的のページに遷移することができました。なのでおそらくliタグ内にaタグがあることが問題に関係していると思われます。
HTML
1<li class="nav-item dropdown"> 2 <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</a> 3 <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> 4 {% for year in list_of_year %} 5 <li class="dropdown-submenu"> 6 <a href="#" role="button" class="dropdown-toggle dropdown-item" id="list{{year}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{year}}</a> 7 <ul class="dropdown-menu" aria-labelledby="list{{year}}"> 8 <li><a class="dropdown-item disabled" href="/month/{{year}}/January" id="list{{year}}01" method="get">January</a></li> 9 <li><a class="dropdown-item disabled" href="/month/{{year}}/February" id="list{{year}}02" method="get">February</a></li> 10 <li><a class="dropdown-item disabled" href="/month/{{year}}/March" id="list{{year}}03" method="get">March</a></li> 11 <li><a class="dropdown-item disabled" href="/month/{{year}}/April" id="list{{year}}04" method="get">April</a></li> 12 <li><a class="dropdown-item disabled" href="/month/{{year}}/May" id="list{{year}}05" method="get">May</a></li> 13 <li><a class="dropdown-item disabled" href="/month/{{year}}/June" id="list{{year}}06" method="get">June</a></li> 14 <li><a class="dropdown-item disabled" href="/month/{{year}}/July" id="list{{year}}07" method="get">July</a></li> 15 <li><a class="dropdown-item disabled" href="/month/{{year}}/August" id="list{{year}}08" method="get">August</a></li> 16 <li><a class="dropdown-item disabled" href="/month/{{year}}/September" id="list{{year}}09" method="get">September</a></li> 17 <li><a class="dropdown-item disabled" href="/month/{{year}}/October" id="list{{year}}10" method="get">October</a></li> 18 <li><a class="dropdown-item disabled" href="/month/{{year}}/November" id="list{{year}}11" method="get">November</a></li> 19 <li><a class="dropdown-item disabled" href="/month/{{year}}/December" id="list{{year}}12" method="get">December</a></li> 20 </ul> 21 <a class="dropdown-item" href="{{url_for('month', year_label = year, month_label = 'January')}}" id="list{{year}}01" method="get">January</a> 22 </li> 23 {% endfor %} 24 </ul> 25</li>
※追記
.disabled
を最初から取り除くとページ遷移ができました。Javascriptでdisabled
を取り除いているのですが、そちらに問題がありそうです。
補足情報(FW/ツールのバージョンなど)
Flask 1.0.2
Bootstrap 4.1.3
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。