Question

我正在工作人员页面上，工作人员照片位于页面一侧的网格中，而履历则显示在另一侧的列中。我使用jQuery在单击人员时添加活动类，并且还使用.position()来设置生物定位的CSS。除了页面加载的第一项之外，所有这些工作都很完美。我为第一位工作人员添加了活动类别，但是我无法让.position()在页面加载时正常工作。它似乎仅适用于'click()

这是我的jQuery：

jQuery(document).ready(function() {
  $('#team-list li a').click(function() {
    $('#team-list li').removeClass('active');
    $(this).parent().addClass('active');  
    var pos = $(this).parentsUntil('#team-list').position();
    var width = $(this).parent('#container').outerWidth();
    $("#team-list .active .bio").css({
      left: - + (pos.left + width) + "px"
    })
    return false;
  });
});

我尝试在单独的函数中添加以下内容：

$(function() {
  var initialPos = $('#team-list').position();
  var initialWidth = $('#container').outerWidth();
  $("#team-list .active .bio").css({
    left: - + (initialPos.left + initialWidth) + "px"
  })
});

我已经使用.load()和.ready()进行了多种尝试这是一个wordpress网站，因此必须以jQuery(document).ready(function()

开头

编辑：添加了HTML

<div class="container">
  <div id="team-list">
    <ul>
      <li class="active">
        <a href="#">
              <img>
              <h3>Person 1</h3>
            </a>
        <div class="bio">
          <h3>Person 1</h3>
          <h4>President</h4>
          <p>
            Person 1 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 2</h3>
            </a>
        <div class="bio">
          <h3>Person 2</h3>
          <h4>Vice President</h4>
          <p>
            Person 2 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 3</h3>
            </a>
        <div class="bio">
          <h3>Person 3</h3>
          <h4>Secretary</h4>
          <p>
            Person 3 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 4</h3>
            </a>
        <div class="bio">
          <h3>Person 4</h3>
          <h4>COO</h4>
          <p>
            Person 4 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 5</h3>
            </a>
        <div class="bio">
          <h3>Person 5</h3>
          <h4>CEO</h4>
          <p>
            Person 5 bio
          </p>
        </div>
      </li>
      <li>
        <a href="#">
              <img>
              <h3>Person 6</h3>
            </a>
        <div class="bio">
          <h3>Person 6</h3>
          <h4>CFO</h4>
          <p>
            Person 6 bio
          </p>
        </div>
      </li>
    </ul>
  </div>

这是CSS

.container {
  max-width: 1040px;
  width: 100%;
  margin: auto;
  padding: 0 20px;
}

#team-list {
  width: 66.66667%;
  margin-left: 33.33333%;
}

#team-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#team-list li {
  list-style: none;
  position: relative;
  flex-wrap: wrap;
  float: left;
  width: 50%;
}

#team-list li:nth-child(odd) {
  padding-right: 10px;
}

#team-list li:nth-child(even) {
  padding-left: 10px;
}

#team-list .bio {
  display: none;
  position: absolute;
  top: 0;
  width: 80%;
}

#team-list .active .bio {
  display: block;
}

Answer 1

建立点击处理程序后，模拟对第一项的点击。

jQuery(document).ready(function() {
  $('#team-list li a').click(function() {
    $('#team-list li').removeClass('active');
    $(this).parent().addClass('active');  
    var pos = $(this).parentsUntil('#team-list').position();
    var width = $(this).parent('#container').outerWidth();
    $("#team-list .active .bio").css({
      left: - + (pos.left + width) + "px"
    })
    return false;
  }).eq(0).click();
});

jQuery将激活的内容滚动到元素

1 个答案: