javascript - 单击更改 anchor 标记的内容和目标

Question

我在链接(“MENU”)上使用 onclick 方法在单击时显示一个 div(#topmenu)，但是如何在出现 div(#topmenu)时将 anchor 标记的文本更改为“CLOSE”并在单击“关闭”时使 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>