点击锚点标签切换文本与Div显示状态（无需jQuery实现）

当然可以不用jQuery搞定这个需求！我们只需要调整一下你的JavaScript逻辑，再给锚点标签加个标识，就能实现点击切换菜单显示状态，同时自动改变锚点文本的效果。

具体步骤： #

1. 给锚点标签添加ID：方便我们在JS里快速定位并修改它的文本内容
2. 修改view()函数：让它变成一个"切换"函数，判断当前菜单的显示状态，然后做出对应的操作（显示/隐藏菜单 + 切换文本）

修改后的完整代码： #

HTML部分：

<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()" id="menuToggle">MENU</a></span>
 </div>
 </div>
 <div id="topmenu">
 <div style="text-align: left;">
 <ul>
 <li>About</li>
 </ul>
 </div>
 </div>

JavaScript部分：

function view() {
  // 获取菜单元素和切换按钮元素
  const topMenu = document.getElementById('topmenu');
  const menuToggle = document.getElementById('menuToggle');
  
  // 获取菜单当前的计算样式，判断是否隐藏
  const isMenuHidden = window.getComputedStyle(topMenu).display === 'none';
  
  if (isMenuHidden) {
    // 菜单隐藏时：显示菜单，文本改为CLOSE
    topMenu.style.display = 'block';
    menuToggle.textContent = 'CLOSE';
  } else {
    // 菜单显示时：隐藏菜单，文本改回MENU
    topMenu.style.display = 'none';
    menuToggle.textContent = 'MENU';
  }
}

CSS部分（保持你原有的即可）：

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

为什么这么做？ #

• getComputedStyle的作用：它能准确获取元素当前的实际显示状态，不管样式是写在CSS文件里还是通过JS添加的内联样式，避免了初始状态下内联样式为空的判断问题。
• textContent比innerHTML更安全：直接修改文本内容，不会引入XSS风险，也更适合这种纯文本切换的场景。
• 切换逻辑更简洁：一个函数搞定两种状态的切换，不需要额外写两个函数分别处理显示和隐藏。

内容的提问来源于stack exchange，提问作者Grey-lover