javascript - 为什么下拉菜单在 Node Project的ejs文件中不起作用?

标签 javascript html node.js ejs

我在nodejs项目的.ejs文件中同时包含了javascript和bootstrap。bootstrap css对按钮起作用(例如btn btn primary),但下拉列表不起作用。
//my index.ejs文件

<!DOCTYPE html>
<html>
    <head>
        <title>Home automation system</title>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/myscript.js"></script>
        <link rel="stylesheet" href="/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/mycss.css">

    </head>
    <body>
        <div class="container">
            <div class="test text-center" style="margin-bottom:0">
                <h1>Home Automation system</h1>
                <p>The first Home Automation system in Bhutan</p> 
            </div>
            <% include partials/navbar.ejs %>
            <br><br>
            <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>
        </div>
    </body>
</html>  

//app.js文件
var express = require('express');
var lightController = require('./controllers/lightController');

var app=express();

//set the template engine
app.set('view engine', 'ejs');

//link static files
app.use(express.static('./public'));

//to fire the controller
lightController(app);

//listen on port
app.listen(3000);
console.log('server running ...');

我已经包含了从bootstrap 4.3(下载)中提取的js和css文件夹,并包含在public文件夹中。

最佳答案

首先,执行以下操作:

<%- include('partials/navbar'); -%>

您需要jquery使用data-toggle,而脚本始终位于页面底部。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script> <!-- make sure that the jquery script is always first -->
<script src="js/myscript.js"></script>
</body>
</html>

关于javascript - 为什么下拉菜单在 Node Project的ejs文件中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54987645/

相关文章:

javascript - 对 html2canvas 的 SVG 支持

html - 在 div 标签中显示长文本

javascript - 检查数组值是否包含在字符串中

javascript - React - 改变一个不受控制的输入

node.js - SPFx Webpart - node_modules/@types/[prop types] 和 [react] index.d.ts : loads of "error TS1005" on gulp build

node.js - Sequelize 模型函数中的访问关系

javascript - jQuery 的 val() 不适用于隐藏字段

javascript - 如何离线使用 Firefox 的 JavaScript 引擎?

javascript - 插入span-node,继续写

javascript - js 文件连接到我的 html 时出现问题