点击显示邮箱地址时隐藏「Show E-mail」按钮的实现问题求助

核心修改点 #

• 给「Show E-mail」触发元素新增唯一ID，方便JS操作隐藏
• 补充点击后隐藏触发按钮的逻辑
• 优化多余a标签避免点击跳转页面顶部

修改后完整代码 #

JavaScript 代码 #

function SEmail() {
  // 选中邮箱元素
  const emailEl = document.getElementById('email');
  // 选中触发按钮元素
  const triggerEl = document.getElementById('emailTrigger');
  if (emailEl.style.display === 'none') {
    // 显示邮箱，inline可保证和前面文字同行，需要换行的话换成block即可
    emailEl.style.display = 'inline';
    // 隐藏触发按钮
    triggerEl.style.display = 'none';
  }
}

HTML 代码 #

<p class="email">
  <?php _e('E-mail:', 'theme') ?>
  <span id="emailTrigger" onclick="SEmail()" style="cursor: pointer;">Show E-mail</span>
  <span id="email" style="display:none">
    <a href="mailto:<?php echo contact_email(); ?>">Email link</a>
  </span>
</p>

可选优化 #

如果你想保留原来的a标签样式，可以不用移除a标签，只需要给点击事件加阻止默认行为即可，修改触发部分代码为：

<span id="emailTrigger">
  <a href="#" onclick="SEmail(); return false;">Show E-mail</a>
</span>

内容的提问来源于stack exchange，提问作者Turbo