using element of one div from another div using javascript-CodePudding

I have a file, and there is a fragment for navbar. In the navbar, we have listItems, and based on the click of those listItems, we plan to open another subnavigationbar below it.

To achieve this, I have the following code:

<!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 >
                <button  type="button" data-toggle="collapse"
                    data-target="#navbarTogglerDemo03"
                    aria-controls="navbarTogglerDemo03" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span ></span>
                </button>

                <div >
                    <ul >
                        <li ><a id="movies"
                            th:
                            href="#subNavbarId">Movies</a></li>  <!-- href fails -->
                        <li ><a id="hr"
                            th:
                            href="/info">Info</a></li>

                    </ul>
                </div>

                <ul >
                    <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" 
                style="background-color: #F5F5F5;">
                <div >
                    <a ></a>
                    <ul >
                        <li ><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>

I want to have a scenario, where I click the "movie" on the navbar, and I get a subnavbar displayed with movieList. Similarly, when I click somewhere outside, the subnavbar fades away.

Guide me here. PS: total noob

CodePudding user response：

your subNavBar.style = "display:block;" looks wrong.

it should be subNavBar.style.display = "block";

CodePudding user response：

According to the Bootstrap documentation, you can use a dropdown :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <button type="button"  data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul >
    <li><a  href="#">An action</a></li>
    <li><a  href="#">Another action</a></li>
    <li><a  href="#">Something else here</a></li>
    <li><hr ></li>
    <li><a  href="#">Separated link</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

By the way, avoid changing css with javascript. You can make a css class and toggle it. Because you use Bootstrap, you can toggle the d-none provided class : subNavBar.classList.toggle("d-none");