줄을 어떻게 늘리거나 줄일 수 있습니까?

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

당신은 이동 : 나는 .move-more 유지

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