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

Question

嗨， friend 们，我正在尝试像这个页面“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 作为 sibling 。
2. 我将 position: relative 添加到容器中，这样可以很容易地跟踪它的子级 .data-circle 的相对偏移量。
3. 当有人点击圆圈时，我读取它相对于容器的偏移量 (.move) 并将 offset.left 值设置为 的宽度。移动更多元素。

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');
   });
});