我在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/