如何在Express+EJS项目的特定页面隐藏导航栏指定菜单项

你原来的jQuery点击隐藏逻辑不生效，是因为点击add按钮后会发生页面跳转，新的/add页面会重新加载完整的DOM结构，前一个页面的DOM修改操作不会保留到新页面中。

推荐两种实现方式，优先选服务端渲染控制的方案： #

方案1：EJS服务端渲染控制（推荐） #

利用EJS模板的条件渲染能力，通过路由传参控制add按钮是否渲染，不会出现按钮闪现问题。

步骤1 修改路由传参 #

修改server.js中的路由代码，渲染页面时传入是否隐藏add按钮的标识位：

const express = require('express');
const path = require('path');

const app = express();

const port = process.env.PORT || 3000;

app.set('views', path.join(__dirname, 'views'));
app.set('view engine','ejs');

app.use("/public", express.static('public')); 
app.use(express.static(path.join(__dirname,'public')));

app.get('/',(req,res) => {
    // 首页不需要隐藏add按钮
    res.render('index', { hideAddBtn: false });
});

app.get('/add',(req,res) => {
    // add页面需要隐藏add按钮
    res.render('add', { hideAddBtn: true });
});

app.listen(port,() => console.log(`App is running at ${port}`));

步骤2 修改nav.ejs增加条件判断 #

修改nav.ejs中add按钮对应的代码块，只有标识位为false的时候才渲染按钮：

<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">Studious</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
  <ul class="navbar-nav">
    <% if (!hideAddBtn) { %>
    <li class="nav-item">
      <a id="ad" class="nav-link active" aria-current="page" href="/add">Add</a>
    </li>
    <% } %>
  </ul>

  </div>
 </div>
</nav>   

方案2：前端JS判断路径隐藏 #

如果不想修改服务端代码，可以在公共JS中判断当前页面路径，匹配到/add时隐藏按钮：
替换index.js中的原有逻辑：

$(document).ready(function(){
  // 页面加载时判断当前路径是否为添加页
  if (window.location.pathname === '/add') {
    $("#ad").hide();
  }
});

注意该方案可能会出现页面加载瞬间add按钮短暂显示后消失的闪现问题。

内容的提问来源于stack exchange，提问作者Digvijay Singh Thakur