点击更改锚标签的内容和目标

Question

I am using the onclick method on a link ("MENU") to display a div (#topmenu) when clicked, but how do I change the text of the anchor tag to "CLOSE" when div (#topmenu) appears and make the div disappear when "CLOSE" is clicked? Could it be achieved without using jQuery?

 function view() { document.getElementById('topmenu').setAttribute('style', 'display:block'); } 

 body * { box-sizing: border-box; } @media only screen and (max-width: 1200px) { .bar { width: 80%; margin: auto; } } @media only screen and (min-width: 1201px) { .bar { width: 1000px; margin: auto; } } .bar { display: flex; justify-content: center; position: relative; } .img img { display: block; } .button span { position: absolute; right: 0; top: 40%; } #topmenu { display:none; clear: both; height:80vh; vertical-align: middle; text-align: center; } #topmenu ul { list-style: none; } 

 <div class="bar"> <div class="img"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png"> </div> <div class="button"> <span style="float: right;"><a href="#!" onclick="view()">MENU</a></span> </div> </div> <div id="topmenu"> <div style="text-align: left;"> <ul> <li>About</li> </ul> </div> </div> 

Answer 1

Apply a class to the topmenu instead of changing the style.

function view(event){
  event.preventDefault();
  document.querySelector("#topmenu").classList.toggle('open');
  if(event.target.innerHTML === "CLOSE")
    event.target.innerHTML = "MENU"
  else
    event.target.innerHTML = "CLOSE"
}

You need to pass event to your onclick function

<a href="#" onclick="view(event)">MENU</a>

in your css

#topmenu.open{
  display:block
}

 function view(event){ document.querySelector("#menu").classList.toggle('red'); if(event.target.innerHTML === "Red") event.target.innerHTML = "Blue" else event.target.innerHTML = "Red" } 

 #menu{ width:100px; height:100px; background:blue; transition:background 200ms; } #menu.red{ background:red; } 

 <a onClick="view(event)" href="#">Red</a> <div id="menu"></div> 

Answer 2

There are many different ways that you can do this using vanilla JavaScript. You can do this easily by setting the a tag to have id="text" and changing the text with a conditional statement that determines what the current value of the text is.

If the text is currently "MENU", it should be changed to "CLOSE" and set display: block . If the text is currently "CLOSE", it should change it back to "MENU" and toggle the topmenu id to be invisible. You can also toggle the styling itself by using toggle .

if (document.getElementById('text').innerHTML === 'MENU'){
    document.getElementById('text').innerHTML = 'CLOSE';
    document.getElementById('topmenu').setAttribute('style', 'display:block');
}
else {
    document.getElementById('text').innerHTML = 'MENU';
    document.getElementById('topmenu').setAttribute('style', 'visibility:hidden');
}

 body * { box-sizing: border-box; } @media only screen and (max-width: 1200px) { .bar { width: 80%; margin: auto; } } @media only screen and (min-width: 1201px) { .bar { width: 1000px; margin: auto; } } .bar { display: flex; justify-content: center; position: relative; } .img img { display: block; } .button span { position: absolute; right: 0; top: 40%; } #topmenu { display: none; clear: both; height: 80vh; vertical-align: middle; text-align: center; } #topmenu ul { list-style: none; } 

 <div class="bar"> <div class="img"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png"> </div> <div class="button"> <span style="float: right;"><a id="text" href="#!" onclick="view()">MENU</a></span> </div> </div> <div id="topmenu"> <div style="text-align: left;"> <ul> <li>About</li> </ul> </div> </div> <script> function view() { if (document.getElementById('text').innerHTML === 'MENU') { document.getElementById('text').innerHTML = 'CLOSE'; document.getElementById('topmenu').setAttribute('style', 'display:block'); } else { document.getElementById('text').innerHTML = 'MENU'; document.getElementById('topmenu').setAttribute('style', 'visibility:hidden'); } } </script> 

Answer 3

Try this

let isDisplayed = false;

function view() {
  isDisplayed = !isDisplayed;
  document.getElementById('topmenu').style.display = isDisplayed?'block':'none';
  document.querySelector('[onclick="view()"]').innerText = isDisplayed ? 'CLOSE':'MENU';
}

Answer 4

Try this solution using pure JavaScript.

 var menu = document.getElementById("top-menu"); var btn = document.getElementById("menu-btn"); btn.addEventListener("click",function(e){ menu.classList.toggle("open"); if(e.target.textContent == "MENU"){ e.target.textContent = "CLOSE"; } else { e.target.textContent = "MENU"; } }); 

 #top-menu { display: none; } .open { display: block !important; } 

 <div id="top-menu">My Meny</div> <a href="#" id="menu-btn">MENU</a>