时间戳

首页 > 解决方案 > 时尚组合模板下拉菜单不起作用

javascript - 时尚组合模板下拉菜单不起作用

问题描述

我从中复制了模板，https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio但下拉菜单在我的机器上不起作用。javascript 和样式表文件没有被修改或编辑，主页代码可以在https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/blob/master/index.html. 下面是我的代码：

APP/VIEWS/LAYOUT/APPLICATION.HTML

<!DOCTYPE html>
<html>
  <head>
    <title>TestApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic',  media: 'all', 'data-turbolinks-track': 'reload' %>
    <script src="vendor/assets/vendor/jquery/jquery.min.js" ></script>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'custom', 'vendor' %> 
  </head>
  <body id="page-top">
    <%= yield %>
  </body>
</html>

APP/VIEWS/MAIN/_NAVIGATION.HTML.ERB

<!-- Navigation -->
<a class="menu-toggle rounded" href="#">
  <i class="fas fa-bars"></i>
</a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <li class="sidebar-brand">
      <a class="js-scroll-trigger" href="#page-top">Start Bootstrap</a>
    </li>
    <li class="sidebar-nav-item">
      <a class="js-scroll-trigger" href="#page-top">Home</a>
    </li>
    <li class="sidebar-nav-item">
      <a class="js-scroll-trigger" href="#about">About</a>
    </li>
    <li class="sidebar-nav-item">
      <a class="js-scroll-trigger" href="#services">Services</a>
    </li>
    <li class="sidebar-nav-item">
      <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
    </li>
    <li class="sidebar-nav-item">
      <a class="js-scroll-trigger" href="#contact">Contact</a>
    </li>
  </ul>
</nav>

配置/WEBPACK/ENVIROMENT.JS

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")

environment.plugins.append("provide", new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
}))

module.exports = environment

APP/JAVASCRIPT/包/APPLICATION.JS

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")
require("jquery/jquery.min.js")

require.context('../images', true)


document.addEventListener("turbolink:load", () => {
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
})

APP/JAVASCRIPT/包/CUSTOM.JS

import "../../../vendor/assets/javascript/stylish-portfolio.min.js"

APP/JAVASCRIPT/Packs/VENDOR.JS

import "../../../vendor/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"
import "../../../vendor/assets/vendor/jquery-easing/jquery.easing.min.js"

任何帮助表示赞赏，谢谢。

标签： javascriptjqueryhtmlruby-on-railswebpack

解决方案

推荐阅读