导航栏可点击在 EJS 模板中不起作用答案

【问题标题】：Navbar clickable not working in EJS template导航栏可点击在 EJS 模板中不起作用
【发布时间】：2020-10-15 18:35:34
【问题描述】：

我是节点 js 和 EJS 模板的新手。我的 navbar.ejs 文件中有一个导航栏，其中有一个下拉切换按钮。我的问题是单击时该按钮不起作用。这是由于到 EJS 模板或我的代码在某处出错。脚本标记在 ejs 模板文件中是否有效？请帮帮我。

假设我已正确完成路由并将所有文件包含在 app.ejs 文件中。

提前致谢:)

navbar.ejs

    <nav class="navbar navbar-default navbar-static-top" style="width:100%;overflow:hidden;height:30px;background-color:#595959;font-size:17px;font-family:'Segoe UI',Arial,sans-serif">
    <div class="container-fluid">
        <ul class="nav navbar-nav" style="margin-left:-20px">
            <li class="dropdown">
                <button type="" class="dropbtn" onclick="myfunction()" >ALL <i class="fa fa-caret-down"></i> </button>
                <div class="dropdown-content" id="myDropdown">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>

                </div>
            </li>
        </ul>
    </div>
</nav>

    <script>
        /* When the user clicks on the button, 
        toggle between hiding and showing the dropdown content */
        function myfunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        // Close the dropdown if the user clicks outside of it
        window.onclick = function (e) {
            if (!e.target.matches('.dropbtn')) {
                var myDropdown = document.getElementById("myDropdown");
                if (myDropdown.classList.contains('show')) {
                    myDropdown.classList.remove('show');
                }
            }
        }
    </script>

style.css

    .dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn {
    cursor: pointer;
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: #595959;
    text-decoration: none;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

nav.navbar li.dropdown:hover div.dropdown-content {
            display: block;
        }

【问题讨论】：

在你的文件中链接引导 css 和 js
在什么意义上它“不起作用”？类是否被添加到相关元素中？在myfunction 中添加一些控制台日志以查看它是否被调用。
是的，我已经在 head 标签中链接了所有必要的文件

标签： javascript html node.js twitter-bootstrap ejs

【解决方案1】：

尝试在</body>标签之前导入以下内容

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

导航链接不起作用，因为当前它们的 href 是死链接。每个链接的 href 必须等于它在 .js 文件中指向的路由。例如，在正常情况下，主路由总是链接到“/”路径，所以如果这应该链接到主路由 Link 1，那么它就变成了我认为应该的 Link 1（或 Home route） .这同样适用于其他路线。如果link 2要链接到某个about路由，那么它应该是Link 2（或about）。我希望这是有道理的。

【讨论】：