如何通过点击来增加和减少线？

Question

朋友们，我正在尝试按照此页“http://makingsense.com/about-us”联系我们页面，我开始尝试了这么多，但我无法明白该怎么做。

请参阅代码：http://jsfiddle.net/cu65a45r/

    // JavaScript Document
       $(document).ready(function(e) {
     $('.clik1').on('click', function() {
    /*   $('.date-circle-active').remove();*/
         $(this).before("<div class='date-circle-active1'></div>");
         $(this).css('margin-left','0');
     });
      $('.clik2').on('click', function() {
    /*   $('.date-circle-active').remove();*/
         $(this).before("<div class='date-circle-active2'></div>");
         $(this).css('margin-left','0');
     });
});

Answer 1

你走了：

Working demo

我的方法和你的方法之间的主要区别：

1. 我将.move-more和.data-circle作为兄弟姐妹。
2. 我将position: relative添加到容器中，以便跟踪其子.data-circle的相对偏移量。
3. 当有人点击圈子时，我会将其读取到容器的偏移量（.move），并将offset.left值设置为.move-more元素的宽度。

JS代码：

$(document).ready(function(e) {
   $('.date-circle').on('click', function() {
     // let's cache link to jQuery wrapper around current circle
     var $this = $(this);
     // remove active class from siblings
     $this.siblings().removeClass('date-circle-active');
     // and add it to the current circle
     $this.addClass('date-circle-active');

     // get left coordinate of current circle relative to .move container
     var leftOffset = $this.offset().left;
     // and set width of the red line to this value
     // I remove 5 pixel that is the width of the circle's border so that .move-more won't spoil yellow background of the circle
     $('.move-more').animate({'width': (leftOffset - 5) + 'px'}, 'fast');
   });
});