Q&A
<li><% else %>は</li><% else %>が適切かと思います。
bootstrap4とRails5でアプリケーションを作成しております
ナビゲーションバーにdropdownを作成したいのですが、dropdownをクリックしてもdropdownメニューが表示されません
いろいろ検索してみたのですが解決には至りませんでしたので、お力を貸していただけると幸いです
以下にコードを添付します
問題点がございましたら、ご教授お願いいたします
application.js // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require activestorage //= require_tree . //= require jquery3 //= require popper //= require bootstrap-sprockets
_navigation_bar.html.erb <header> <nav class="navbar navbar-expand navbar-dark bg-dark"> <%= link_to "Shinshu Fiber Class", root_path, class: 'navbar-brand' %> <div id="Navber"> <ul class="navbar-nav"> <% if user_signed_in? %> <li class="nav-item active"> <%= link_to 'アカウント編集', edit_user_registration_path, class: 'nav-link' %> </li> <li class="nav-item active"> <%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: 'nav-link' %> </li> <li class="nav-item active"> <%= link_to "授業一覧", classrooms_path, class: 'nav-link' %> </li> <li class="nav-item active"> <%= link_to "サークル作成", new_club_path, class: 'nav-link' %> </li> <li class="nav-item active"> <%= link_to "ユーザ一覧", users_path, class: 'nav-link' %> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> <li> <% else %> <li class="nav-item active"> <%= link_to "新規登録", new_user_registration_path, class: 'nav-link' %> </li> <li class="nav-item active"> <%= link_to "ログイン", new_user_session_path, class: 'nav-link' %> </li> <% end %> </ul> </div> </nav> </header>
application.scss /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import "bootstrap"; a { text-decoration: none; }
回答ありがとうございます。
</li><% else %>に修正後、試してみましたがうまくいきませんでした。。。
切り分けのため、下記をペーストして、きちんと動くか確認してみてください。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
参考：https://getbootstrap.jp/docs/4.2/components/dropdowns/
あなたの回答
tips
プレビュー
