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

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

在这里你去：

1. 我一直.move-more和.data-circle的：

   Working demo

   我的方法和你的之间的主要区别作为兄弟姐妹。

2. 我在容器中添加了position: relative，这样就很容易跟踪它的孩子的相对偏移量.data-circle s。
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'); 
    }); 
});