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

Question

我在链接（“ MENU”）上使用onclick方法在单击时显示div（#topmenu），但是当div（#topmenu）出现时如何将锚标记的文本更改为“ 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>

Answer 2

可以使用香草JavaScript进行多种操作。您可以通过将a标记设置为具有id="text"并使用条件语句更改文本来轻松地做到这一点，该条件语句确定文本的当前值是什么。

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