使用 javascript 從另一個 div 使用一個 div 的元素

Question

我有一個文件，並且有一個導航欄的片段。 在導航欄中，我們有 listItems，根據這些 listItem 的點擊，我們計划在其下方打開另一個子導航欄。

為此，我有以下代碼：

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
    xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<body>
    <div>
        <div th:fragment="navbar">
            <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarTogglerDemo03"
                    aria-controls="navbarTogglerDemo03" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active"><a id="movies"
                            th:class="(${#httpServletRequest.requestURI}=='/movies') ? 'nav-link active' : 'nav-link'"
                            href="#subNavbarId">Movies</a></li>  <!-- href fails -->
                        <li class="nav-item"><a id="hr"
                            th:class="(${#httpServletRequest.requestURI}=='/info') ? 'nav-link active' : 'nav-link'"
                            href="/info">Info</a></li>

                    </ul>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <div sec:authorize="isAuthenticated()">
                        Logged in: <span sec:authentication="name"></span>
                    </div>
                </ul>
            </nav>
            <script type="text/javascript">
                var projects = document.getElementById("movies");
                var subNavBar = document.getElementById("subNavbarId"); //Failure
                projects.addEventListener("click", function() {
                    subNavBar.style = "display:block;"
                })
            </script>
        </div>

        <div class = "subNavClass" id="subNavbarId" th:fragment="subnavbar" style="display: none;">
            <nav id="navbar-nav ms-auto" class="navbar navbar-expand-lg"
                style="background-color: #F5F5F5;">
                <div class="collapse navbar-collapse">
                    <a class="navbar-brand px-5"></a>
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item"><a id="subnavbar-content"
                            href="/movieList"> movieList</a></li>
                    </ul>
                </div>
            </nav>

            <script type="text/javascript">
                var subNavBar = document.getElementById("subNavbarId");
                subNavBar.addEventListener("mouseleave", function() {
                    subNavBar.style = "display:none;"
                })
            </script>
        </div>
    </div>
</body>
</html>

我想要一個場景，我在導航欄上單擊“電影”，然后我得到一個顯示有 movieList 的子導航欄。 同樣，當我點擊外面的某個地方時，子導航欄會消失。

在這里指導我。 PS：總菜鳥

Answer 1

你的subNavBar.style = "display:block;" 看起來不對。

應該是subNavBar.style.display = "block";

Answer 2

根據Bootstrap 文檔，您可以使用下拉列表：

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">An action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

順便說一下，避免將 css 更改為 javascript。您可以制作一個 css class 並切換它。 因為您使用 Bootstrap，所以可以切換提供的d-none class： subNavBar.classList.toggle("d-none");

使用 javascript 從另一個 div 使用一個 div 的元素

問題描述

2 個解決方案

解決方案1
1 2022-04-19 09:23:26

解決方案2
0 2022-04-19 09:32:00

使用 javascript 從另一個 div 使用一個 div 的元素

問題描述

2 個解決方案

解決方案1 1 2022-04-19 09:23:26

解決方案2 0 2022-04-19 09:32:00

解決方案1
1 2022-04-19 09:23:26

解決方案2
0 2022-04-19 09:32:00