wordpress 实现招聘页面，多个岗位点击展开招聘详情

要在WordPress中实现招聘页面，并让多个岗位点击展开招聘详情，你可以按照以下步骤进行操作：

创建一个新的页面：
在WordPress后台，转到“页面” -> “添加新页面”，创建一个新的页面作为你的招聘页面。

编辑并添加岗位信息：
在新建的页面中，使用WordPress编辑器或自定义字段来添加多个岗位的信息。可以使用标题、文本、列表等元素为每个岗位提供简要描述和其他相关信息。

添加展开/折叠功能：
使用JavaScript或jQuery来实现点击展开/折叠功能。你可以为每个岗位标题（如

或其他标签）添加点击事件，并使用CSS样式来切换显示和隐藏详细信息。

以下是一个示例代码：

html代码：

    <div class="job-post">
    <h2 class="job-title">
        前端工程师
        <span class="arrow">&#9656;</span>
    </h2>
    <div class="job-details">
        <p>工作要求：</p>
                <ul>
            <li>精通HTML、CSS和JavaScript</li>
            <li>熟悉前端框架（如React、Vue等）</li>
            <!-- 其他招聘详情 -->
        </ul>
    </div>
<h2 class="job-title">
        前端工程师
        <span class="arrow">&#9656;</span>
    </h2>
    <div class="job-details">
        <p>工作要求：</p>
                <ul>
            <li>精通HTML、CSS和JavaScript</li>
            <li>熟悉前端框架（如React、Vue等）</li>
            <!-- 其他招聘详情 -->
        </ul>
    </div>
<h2 class="job-title">
        前端工程师
        <span class="arrow">&#9656;</span>
    </h2>
    <div class="job-details">
        <p>工作要求：</p>
                <ul>
            <li>精通HTML、CSS和JavaScript</li>
            <li>熟悉前端框架（如React、Vue等）</li>
            <!-- 其他招聘详情 -->
        </ul>
    </div>
<h2 class="job-title">
        前端工程师
        <span class="arrow">&#9656;</span>
    </h2>
    <div class="job-details">
        <p>工作要求：</p>
                <ul>
            <li>精通HTML、CSS和JavaScript</li>
            <li>熟悉前端框架（如React、Vue等）</li>
            <!-- 其他招聘详情 -->
        </ul>
    </div>
<h2 class="job-title">
        前端工程师
        <span class="arrow">&#9656;</span>
    </h2>
    <div class="job-details">
        <p>工作要求：</p>
                <ul>
            <li>精通HTML、CSS和JavaScript</li>
            <li>熟悉前端框架（如React、Vue等）</li>
            <!-- 其他招聘详情 -->
        </ul>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var jobTitles = document.querySelectorAll('.job-title');

  jobTitles.forEach(function(title) {
      title.addEventListener('click', function() {
          var arrow = this.querySelector('.arrow');
          var jobDetails = this.nextElementSibling;
          
          if (jobDetails.classList.contains('show-details')) {
              arrow.textContent = String.fromCharCode(9656);
              arrow.classList.remove('rotate-downwards');
          } else {
              arrow.textContent = String.fromCharCode(9662);
              arrow.classList.add('rotate-downwards');
          }
          
          jobDetails.classList.toggle('show-details');
      });
  });
});
</script>

<style>
.job-details {
  display: none;
}
.job-title{
background:#f2f2f2;
font-size:16px;
padding：20px;
}
.show-details {
  display: block;
}

.arrow.rotate-downwards {
  transform: rotate(90deg);
}
</style>

赞 0

本文来自投稿，不代表本站立场，如若转载，请注明出处：https://www.firsource.cn/web/406.html