Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have made navigation with two dropdown and arrow icons that activate when clicked. However, if I click on one of the arrows the other also activates. I kinda understand what the issues are however I am confused about how to solve them. As I am new to coding and I believe I may have coded the wrong.

HTML
<blockquote class="quote"><div class="op">Quote:</div><!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>324SQN - City of Randwick</title>
    <link rel="stylesheet" href="StyleSheet1.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    
</head>
<body>
    <section class="Header">
        
        <nav>
            <a href="index.html"><img src="Images/Logo.png" /></a>
            <a href="index.html" class="banner"><img src="Images/Sologan.png" /></a>

            <div class="nav-Links" id="navLinks">
                

                <ul>
                    <li> <a href="Home.html">Home</a> </li>
                    <li> <a href="About.html">About Us</a> </li>
                    <li  class="click2">
                        Recruiting  

                        <div class="Sub-menu-2">

                            <ul>

                                <li><a href="#">Number 1</a></li>
                                <li><a href="#">Number 2</a></li>

                            </ul>

                        </div>

                    </li>
                    <li> <a href="Contact.html">Contact Us</a> </li>
                    <li> <a href="">Leave Request</a> </li>
                    <li  class="click"> CadetLinks  

                        <div id="navLinks1" class="Sub-menu-1">

                            <ul>

                                <li><a href="#">Number 1</a></li>
                                <li><a href="#">Number 2</a></li>
                                <li><a href="#">Number 3</a></li>

                            </ul>

                        </div>

                    </li>
                </ul>
            </div>
            ^__i class="fas fa-bars" onclick="showMenu()">
        </nav>
        <div class="Header-Text">
            <h1>Number 324 (City of Randwick) Squadron</h1>
            <p>Educate, Challenge, Excites</p>
            <a href="" class="Button">Click Here To Know More</a>
        </div>
    </section>

   <script src="Script1.js"></script>
</body>
</html></blockquote>

<pre lang="text">



<pre lang="CSS" linecount="on">


nav{
    display:flex;
    padding: 2% 2% 0 2%;
    justify-content:space-between;
    align-items:center;
}

.nav-Links {
    flex: 1;
    text-align: right;
}

    .nav-Links ul li {
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
        position: relative;
        color: white;
        text-decoration: none;
        font-size: 115%;
    }


        .nav-Links ul li a {
            color: white;
            text-decoration: none;
            font-size: 105%;
        }

.nav-Links ul li::after {
    content: '';
    width: 0%;
    height: 3px;
    background: royalblue;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-Links ul li:hover::after{
    width:100%;
}


nav .fas{
    display:none;
}

.Sub-menu-1,
.Sub-menu-2 {
    display: none;
}

.NewSub-menu-1,
.NewSub-menu-2 {
    display: block;
    position: absolute;
}

    .NewSub-menu-1 ul,
    .NewSub-menu-2 ul {
        display: block;
        position: absolute;
        transition: 2s;
    }






.nav-Links ul li .Sub-menu-1 ul li,
.nav-Links ul li .Sub-menu-2 ul li {
    width: 110px;
    padding: 5px;
    background: transparent;
    border-radius: 0;
    text-align: left;
}

.fas.fa-chevron-left {
    
    display: inline-block;
    padding-left: 5px;
}
.nav-Links.active .fas.fa-chevron-left {
    transform: rotate(-90deg);
    transition:1s;
}

 .nav-Links2.active .fas.fa-chevron-left {
    transform: rotate(-90deg);
    transition:1s;
}
JavaScript
  1  let click = document.querySelector('.click');
  2  
  3  let list = document.querySelector('.Sub-menu-2');
  4  
  5  
  6  
  7  
  8  document.getElementById('navLinks1').onclick = function () {
  9  
 10      var className = ' ' + navLinks1.className + ' ';
 11  
 12      this.className = ~className.indexOf(' active ') ?
 13          className.replace(' active ', ' ') :
 14          this.className + ' active';
 15  };
 16  click.addEventListener("click", () => {
 17  
 18      list.classList.toggle('NewSub-menu-2');
 19      
 20  
 21  });
 22  
 23  let click2 = document.querySelector('.click2');
 24  
 25  let list2 = document.querySelector('.Sub-menu-1');
 26  
 27  
 28  
 29  
 30  document.getElementById('navLinks').onclick = function () {
 31  
 32      var className = ' ' + navLinks.className + ' ';
 33  
 34      this.className = ~className.indexOf(' active ') ?
 35          className.replace(' active ', ' ') :
 36          this.className + ' active';
 37  };
 38  click2.addEventListener("click", () => {
 39  
 40      list2.classList.toggle('NewSub-menu-1');
 41  
 42  
 43  });


What I have tried:

Tried changing a couple classes ended up getting confused
Posted
Updated 1-Sep-21 2:01am
v5
Comments
Richard Deeming 1-Sep-21 7:49am    
Rather than dumping 550+ lines of code on us and expecting us to wade through it all to find the problem, how about you try to narrow down where the problem is, and only post the relevant parts of your code?
Sina Hafezi Masoomi 1-Sep-21 7:59am    
Hi Richard

Sorry about that I was on Stackflow before asking other questions and the helpers wanted me to post the whole code.
Sina Hafezi Masoomi 1-Sep-21 7:59am    
I thought it might be the same here

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900