Toggling menu problematic-CodePudding

I'm trying to hide and show .sub-menu by clicking the .menu anchor, it work only by showing it. If I press to hide it has no reaction, what I am supposed to do and what is the mistake?

Here is the code.

<div >
  <a href="javascript:myFunction();"  onclick="myFunction()">
  <div ></div>
  <div ></div>
  <div ></div>
  </a>
 <div id="sm">
   <a href="#">FAQ</a>
   <a href="#">Support</a>
   <a href="#">Features</a>
 </div>
</div>
CSS
nav div{
    height:7px;
    background-color: white;
    margin: 5px 0;
    border-radius: 25px;
}

.menu {
    position: absolute;
    display:inline-block;
    text-align:center;
    right:130px;
    top:60px;
}

.unu {
    width: 45px;
 }
    
.doi {
    width: 20px;
}
    
.trei {
    width:35px;
}

#sm {
    display: none;
}
JS
function myFunction() {
    var x = document.getElementById("sm")
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

CodePudding user response：

If you use

console.log(`${x.style.display}`)

you will get

<empty string>

in your first attempt not

none

that is why you need to set

function myFunction() {
    var x = document.getElementById("sm")
    if (x.style.display === "" || x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

I will add a console.log in window.load event to see what is the value of the sm element when the page load at first. And you can also check what is new properties when you click button.

const myDiv = document.getElementById('sm');

const controlButton = document.querySelector('button')

window.addEventListener('load', () => {
    console.log(`${myDiv.style.display}`);
})

controlButton.addEventListener('click', () => {
    
    
    if (myDiv.style.display === "" || myDiv.style.display === "none") {
        myDiv.style.display = "block";
    } else {
        myDiv.style.display = "none";
    }
    console.log(`${myDiv.style.display}`);
})

*, 
*::before,
*::after{
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    min-height: 100vh;
    margin: 0;
    background-color: bisque;
}

nav div{
    height:7px;
    background-color: white;
    margin: 5px 0;
    border-radius: 25px;
    
}

.menu {
    position: absolute;
    display:inline-block;
    text-align:center;
    right:130px;
    top:60px;
}

.unu {
    width: 45px;
 }
    
.doi {
    width: 20px;
}
    
.trei {
    width:35px;
}

#sm {
    display: none;
}
 

button{
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: greenyellow;
    top: 5rem;
    left: 5rem;
}

<div >
        <div ></div>
        <div ></div>
        <div ></div>
      </a>
      <div id="sm">
        <a href="#">FAQ</a>
        <a href="#">Support</a>
        <a href="#">Features</a>
      </div>
</div>
<button>Click me</button>

CodePudding user response：

Instead of using display property you can create a .class for toggling which is quite simple than checking styles.

const toggle = document.querySelector('.toggle');
const hidden = document.querySelector('.hidden');

toggle.addEventListener('click', event => {
  // because anchor's default behaviour is redirecting
  event.preventDefault();
  hidden.classList.toggle('revealed');
});

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.toggle,
.hidden {
  font-family: sans-serif;
  font-size: 1.5rem;
}

.hidden {
  position: absolute;
  margin-top: 6rem;
  display: none;
}

.hidden.revealed {
  display: block;
}

<a href="#" > Click Me For Toggling </a>

<p > I was hidden Initially </p>

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help</title>
    <style>
        nav div{
    height:7px;
    background-color: white;
    margin: 5px 0;
    border-radius: 25px;
}

.menu {
    position: absolute;
    display:inline-block;
    text-align:center;
    right:130px;
    top:60px;
}

.unu {
    width: 45px;
 }
    
.doi {
    width: 20px;
}
    
.trei {
    width:35px;
}

.sm {
    display: none;
}
.show {
    display:block;
}
</style>
</head>
<body>

<div >
  <a href="#">
  <div >lll</div>
  <div ></div>
  <div ></div>
  </a>
 <div >
   <a href="#">FAQ</a>
   <a href="#">Support</a>
   <a href="#">Features</a>
 </div>
</div>
<script>

    var show  = document.querySelector("a")
    var x = document.querySelector(".sm")
    show.addEventListener('click',()=>{
        x.classList.toggle("show")
    })
    
</script>

</body>
</html>

I made a lot of changes! You first I use Js Vanilla j. I relied on the "click" event on the "a" tag By leaving your function in the link, it works but, once it appears, it disappears by itself again. Which means it doesn't overwrite the display property that was in the class sm. In short, it works well; you can check on snipett