提问人：Afaq Khan 提问时间：11/1/2023 更新时间：11/1/2023 访问量：19
语义 UI 下拉列表在 Rails 7 应用程序中不起作用
Semantic UI Dropdown not Functioning in Rails 7 Application
问：
我在使用 CDN 开发的 Rails 7 应用程序中遇到了语义 UI 下拉列表的问题。尽管我付出了努力，但下拉列表仍未按预期工作。以下是相关代码：
application.html.erb：
<!DOCTYPE html>
<html>
<head>
<title>OnlineChattingAppInRails</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
</head>
<body>
<%= render 'shared/header' %>
<div class="ui container">
<%= yield %>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<%= javascript_include_tag 'custom' %>
</body>
</html>
_header.html.erb：
<div class="ui small inverted menu">
<div class="ui container">
<a class="item">Home</a>
<a class="item">Messages</a>
<div class="right menu">
<div class="ui dropdown item">
Language <i class="dropdown icon"></i>
<div class="menu">
<a class="item">English</a>
<a class="item">Russian</a>
<a class="item">Spanish</a>
</div>
</div>
<div class="item">
<div class="ui primary button">Sign Up</div>
</div>
</div>
</div>
</div>
自定义.js （app/javascript/custom.js）：
$(document).on("turbolinks:load", function () {
$(".ui.dropdown").dropdown();
});
尽管有这些配置，但下拉列表的行为与预期不同。我已确保正确包含jQuery和Semantic UI。你能帮我确定问题并提供解决方案吗？
答：
0赞
Afaq Khan
11/1/2023
#1
我只是从以下位置删除了这一行：application.html.erb
<%= javascript_include_tag 'custom' %>
并在关闭 body 标签之前将其替换为以下代码：
<script>
$(".ui.dropdown").dropdown();
</script>
评论