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

Question

我使用的链接（“MENU”）上的onclick方法来显示点击时一个div（#topmenu），但我要如何改变锚标记的文字为“关闭”时，DIV（#topmenu）出现，使单击“关闭”时div消失了吗？ 不使用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

将一个类应用于顶部菜单，而不更改样式。

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"
}

您需要将事件传递给onclick函数

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

在你的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

您可以使用香草JavaScript进行多种操作。 您可以通过设置很容易地做到这a标签有id="text" ，并改变与它决定了文本的当前值是一个条件语句的文本。

如果文本当前为“ MENU”，则应将其更改为“ CLOSE”并设置display: block 。 如果文本当前为“ CLOSE”，则应将其更改回“ MENU”并切换topmenu菜单ID以使其不可见。 您还可以使用toggle来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

尝试这个

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

使用纯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>