jquery 语义UI下拉列表在Rails 7应用程序中不起作用

fruv7luv  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(94)

我在使用CDN开发的Rails 7应用程序中遇到了一个Semantic 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>


custom.js(app/javascript/custom.js):

$(document).on("turbolinks:load", function () {
  $(".ui.dropdown").dropdown();
});


尽管进行了这些配置,但MySQL的行为并不符合预期。我已确保正确包含了jQuery和Semantic UI。您能帮助我确定问题并提供解决方案吗?

k5hmc34c

k5hmc34c1#

我只是从application.html.erb中删除了这一行:

<%= javascript_include_tag 'custom' %>

字符串
并在body标记关闭之前将其替换为以下代码:

<script>
  $(".ui.dropdown").dropdown();
</script>

相关问题