如何实现jquery垂直魔术线？

Question

i need this border to be moved when an li element is clicked我正在为li元素创建一个可移动的边框，在这里我尝试使用top垂直实现jquery-magicline-navigation，但所有li元素的移动边框都获得了相同的最高价值

$(document).ready(function() {
  $("#subscriptions-life-cycle li div").on("click", function() {
    $("#subscriptions-life-cycle li.div.active-class").removeClass("active-class");
    $(this).addClass("active-class");
  });

  function slidingLine() {
    var $el, topPos, newHeight,
      $mainNav = $("#subscriptions-life-cycle");
    $mainNav.append("<li><div class='active-life-cycle'></div></li>");
    var $slidingLine = $(".active-life-cycle");

    $slidingLine // Defining initial height and position
      .height($(".active-class").innerHeight())
      .css("top", $(".active-class").position().top)
      .data("origTop", $slidingLine.position().top)
      .data("origHeight", $slidingLine.height());

    $("#subscriptions-life-cycle li div ").click(function() { // Set new height and position
      $el = $(this);
      topPos = $el.position().top;
      newHeight = $el.innerHeight();
      $slidingLine.stop().animate({
        top: topPos,
        height: newHeight
      });
    }, function() {
      $slidingLine.stop().animate({
        top: $(".active-class").position().top,
        height: $(".active-class").innerHeight()
      });
    });
  }

  slidingLine();
});

.life-cycle-content-list {
  padding: 0% 10% 0 5%;
  list-style: square;
}

.life-cycle-content-list li {
  padding: 4%;
  margin-left: 8%;
  font-size: 14px;
  line-height: 30px;
}

.active-life-cycle {
  position: absolute;
  margin-right: 10%;
  border: 0.5px solid;
}

ul#subscriptions-life-cycle {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="life-cycle-content-list" id="subscriptions-life-cycle">
  <li>
    <div class="toggle-life-cycle active-class" id="pricing-plan">
      <div class="life-cycle-content-sub-header">
        Pricing plan information
      </div>
      <div class="life-cycle-content-desc">
        Simplify signup process by providing multiple plans, addons, and coupons. Provide customers the freedom to try your offering with free trials.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="payment-process-life-cycle">
      <div class="life-cycle-content-sub-header">
        Payment process
      </div>
      <div class="life-cycle-content-desc">
        Collect online and offline payments via leading payment gateways. Make the checkout process a cinch with slick and secure hosted payment pages.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="billing-experience">
      <div class="life-cycle-content-sub-header">
        Billing experience
      </div>
      <div class="life-cycle-content-desc">
        Set your invoicing to auto-pilot but make sure that it still reflects your brand. Store customer card information securely for convenient billing.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="involuntary-churn">
      <div class="life-cycle-content-sub-header">
        Involuntary churn
      </div>
      <div class="life-cycle-content-desc">
        Don't let involuntary failed payments affect your rapport with customers. Automate card retries to Maximize your revenue.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="collaboration">
      <div class="life-cycle-content-sub-header">
        Collaboration
      </div>
      <div class="life-cycle-content-desc">
        Empower your customers by providing a self-service portal and strengthen your relationship with them by communicating about payment failures and card expirations.
      </div>
    </div>
  </li>
</ul>

as you can see in image that border is not appiled properly and also it is just appended to li element but not moved to required position

Answer 1

错误来自将两个函数传递给.click()处理程序。

.click()从jQuery's documentation开始接受两个参数，但是第一个参数（它是可选的）（如果存在）必须是一个包含将被传递到事件处理程序的数据的对象。就您而言，您只是传递了两个函数。 .click()无法识别此签名。

我不确定第二个参数（jQuery将其视为实际的事件处理程序函数）用于什么，我删除了它，现在它可以工作了：

var $el, topPos, newHeight,
  $mainNav = $("#subscriptions-life-cycle");

$mainNav.append("<li><div class='active-life-cycle'></div>");

var $slidingLine = $(".active-life-cycle"),
  $activeClass = $(".active-class")

$slidingLine // Defining initial height and position
  .height($activeClass.height())
  .width($activeClass.width())
  .css("top", $activeClass.position().top)
  .data("origTop", $slidingLine.position().top)
  .data("origHeight", $slidingLine.height());

$("#subscriptions-life-cycle .toggle-life-cycle")
  .click(function() { // Set new height and position
    console.log("click");
    $el = $(this);
    topPos = $el.position().top;
    newHeight = $el.innerHeight();

    $slidingLine.stop().animate({
      top: topPos,
      height: newHeight
    });

  });

.life-cycle-content-list {
  padding: 0% 10% 0 5%;
  list-style: square;
}

.life-cycle-content-list li {
  padding: 4%;
  margin-left: 8%;
  font-size: 14px;
  line-height: 30px;
}

.active-life-cycle {
  position: absolute;
  margin-right: 10%;
  border: 0.5px solid;
}

ul#subscriptions-life-cycle {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="life-cycle-content-list" id="subscriptions-life-cycle">
  <li>
    <div class="toggle-life-cycle active-class" id="pricing-plan">
      <div class="life-cycle-content-sub-header">
        Pricing plan information
      </div>
      <div class="life-cycle-content-desc">
        Simplify signup process by providing multiple plans, addons, and coupons. Provide customers the freedom to try your offering with free trials.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="payment-process-life-cycle">
      <div class="life-cycle-content-sub-header">
        Payment process
      </div>
      <div class="life-cycle-content-desc">
        Collect online and offline payments via leading payment gateways. Make the checkout process a cinch with slick and secure hosted payment pages.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="billing-experience">
      <div class="life-cycle-content-sub-header">
        Billing experience
      </div>
      <div class="life-cycle-content-desc">
        Set your invoicing to auto-pilot but make sure that it still reflects your brand. Store customer card information securely for convenient billing.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="involuntary-churn">
      <div class="life-cycle-content-sub-header">
        Involuntary churn
      </div>
      <div class="life-cycle-content-desc">
        Don't let involuntary failed payments affect your rapport with customers. Automate card retries to Maximize your revenue.
      </div>
    </div>
  </li>
  <li>
    <div class="toggle-life-cycle" id="collaboration">
      <div class="life-cycle-content-sub-header">
        Collaboration
      </div>
      <div class="life-cycle-content-desc">
        Empower your customers by providing a self-service portal and strengthen your relationship with them by communicating about payment failures and card expirations.
      </div>
    </div>
  </li>
</ul>