質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

2407閲覧

liタグ内のaタグ リンクが機能しない

goldthisplay

総合スコア14

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2018/11/03 10:35

編集2018/11/03 16:30

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

レンダリング時に全てのaタグに.disabledを書いて、データが存在するものを後からJavascriptで消すようにしていましたが、データが存在しないものはレンダリング時からjinjaで.disabledを書くようにすると、問題を回避することができました。前者の方法が良くなかったのでしょうが、どう良くなかったかはわかりませんでした。しかし、実現したいものは出来上がったので解決とします。

投稿2018/11/03 17:45

goldthisplay

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

<a>についた.disabledがメニューを無効化しています(Bootstrap公式)。このクラスを外してください。

投稿2018/11/03 10:44

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goldthisplay

2018/11/03 16:10 編集

すみません、書き忘れていたのですが、データベースと照らし合わせてデータが存在しているものはJavascriptで.disabledを取り除いています。.disabledが取り除かれたaタグはマウスを乗せるとカーソルが変化し、「右クリック->新しいタブで開く」でページに移動することができますが、左クリックだとページ遷移しません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問