Question

我是节点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;
        }

Answer 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>

Answer 2

导航链接不起作用，因为当前它们的href是无效链接。每个链接的href必须等于.js文件中指向的路由。例如，在正常情况下，本地路由始终链接到“ /”路径，因此如果应该链接到本地路由（链接1），则它会变成链接1（或本地路由），正如我认为的那样。其他路线也一样。如果链接2链接到某个关于路线，则它应该是链接2（或关于）。我希望这是有道理的。

导航栏可点击不在EJS模板中工作

2 个答案: