WordPress点击导航菜单打开指定Accordion标签页的问题求助

核心问题诊断 #

• CSS中.accordionItemContent的display: block !important;强制所有内容显示，忽略了.close类的隐藏规则
• 标签切换时未正确同步close与open类的替换逻辑

分步修复方案 #

1. 修正CSS代码 #

移除强制显示规则，调整内容显示/隐藏的过渡逻辑：

/* 替换原有的.accordionItemContent样式 */
.accordionItemContent {
  overflow: hidden;
  transition: all 0.4s ease;
}

.accordionItemContent .left-column {
  display: inline-block;
  float: left;
  width: 46%;
}

.accordionItemContent .right-column {
  display: inline-block;
  float: right;
  width: 52%;
}

/* 修改关闭状态的内容样式 */
.close .accordionItemContent {
  height: 0;
  transform: scaleY(0);
  opacity: 0;
}

/* 修改打开状态的内容样式 */
.open .accordionItemContent {
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  width: 100%;
  margin: 0px 0px 10px 0px;
  transform: scaleY(1);
  opacity: 1;
  height: auto;
}

/* 保留其他原有CSS样式不变 */
.accordionItem {
  float: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

.accordionItemHeading {
  cursor: pointer;
  margin: 0px 0px 10px 0px;
  padding: 10px;
  background: #002766;
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  width: 100%;
  border-radius: 3px;
  box-sizing: border-box;
}

.accordionItemHeading::after {
  content: "+";
  position: relative;
  float: right;
  right: 1rem;
  top: 0px;
  font-size: 40px;
  font-weight: 500;
  color: #ffffff;
  padding: 10px;
  width: 40px;
  height: 40px;
  line-height: 15px;
  border-radius: 0%;
  border: none;
  text-align: center;
}

.open .accordionItemHeading {
  margin: 0px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #ffc032;
  color: #002766;
}

.open .accordionItemHeading::after {
  content: "-";
  color: #002766;
  border: none;
  position: relative;
  float: right;
  right: 1rem;
  top: 0px;
  font-size: 40px;
  font-weight: 500;
  padding: 10px;
  width: 40px;
  height: 40px;
  line-height: 5px;
  border-radius: 0%;
  text-align: center;
}

.accordionItemContent p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  text-align: justify;
  margin-top: 0px;
  margin-bottom: 0px;
}

.accordionItemContent ul.custom-bullets {
  color: #ff1b23;
  list-style: none;
  margin: 20px 0 20px 0;
  display: inline-block;
}

.accordionItemContent ul.custom-bullets li {
  margin: 0 0 0 0;
  padding: 0 0 10px 18px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}

.accordionItemContent ul.custom-bullets li:before {
  content: "\f105";
  font-family: "FontAwesome";
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 24px;
  font-weight: 700;
  color: #002766;
}

2. 优化JavaScript逻辑 #

实现类的正确替换，添加平滑滚动和哈希同步：

document.addEventListener('DOMContentLoaded', function() {
  const accItems = document.querySelectorAll('.accordionItem');
  const accHeadings = document.querySelectorAll('.accordionItemHeading');

  // 打开指定标签并关闭其他
  function openAccordionTab(tabId) {
    accItems.forEach(item => {
      if (item.id === tabId) {
        item.classList.remove('close');
        item.classList.add('open');
        // 平滑滚动到目标标签
        item.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else {
        item.classList.remove('open');
        item.classList.add('close');
      }
    });
  }

  // 处理URL哈希变化
  function handleHashChange() {
    const hash = window.location.hash.substring(1);
    if (hash) openAccordionTab(hash);
  }

  // 标题点击切换逻辑
  function toggleItem() {
    const parentItem = this.parentNode;
    const targetId = parentItem.id;
    if (parentItem.classList.contains('open')) {
      parentItem.classList.remove('open');
      parentItem.classList.add('close');
      // 移除哈希，避免刷新后保持打开状态
      window.history.pushState('', document.title, window.location.pathname + window.location.search);
    } else {
      openAccordionTab(targetId);
      // 更新哈希，支持页面刷新和链接分享
      window.location.hash = targetId;
    }
  }

  // 绑定事件监听
  accHeadings.forEach(heading => heading.addEventListener('click', toggleItem));
  window.addEventListener('hashchange', handleHashChange);
  
  // 页面加载时初始化哈希对应标签
  handleHashChange();
});

3. WordPress导航菜单设置 #

• 进入WordPress后台外观 > 菜单
• 添加「自定义链接」，URL填写#concrete-services（对应目标Accordion的ID），链接文本输入「Concrete Services」
• 保存菜单后，点击导航链接即可跳转到对应标签并自动展开

额外优化建议 #

• 给.accordionItem添加清除浮动样式，避免布局塌陷：

.accordionItem::after {
  content: "";
  display: table;
  clear: both;
}

• 确保主题已加载FontAwesome资源，否则自定义列表符号无法正常显示

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