4 섹션 대화식 토글

Question

대화식 그래픽 작업을하고 있습니다. 4 부분으로 구성되어 있습니다. 하나를 클릭하면, 다른 사람들이 열려 있는지 확인하고 있다면, 내가 그들을 재설정하는거야.

내가 말하는 부분은 여기에 있습니다. http://lemieux-design.net/profitero/ 원형 그래픽입니다.

클라이언트는 또한 사용자가 열려있는 부분을 접을 수 있기를 원합니다. 계속 진행되는 다른 모든 조건문을 사용하여이를 수행 할 수 있는지 확실하지 않습니다. 추측 해봐?

Answer 1

확실히 가능합니다.

첫째 대신 검사의 모든 다른 유형을 가진 당신은 단순히 두 가지 방법으로 솔루션을 수행 할 수 있습니다 :

1. 는 TweenLite 의존성을 제거, 당신이 그것을 사용하는 모든 당신이 할 수있는 (지금까지 내가 말할 수있는) CSS 애니메이션으로 쉽게 할 수 있습니다.

2. 셀렉터에 jQuery를 사용하고 있으므로 일반 셀렉터와 대상 형제를 아래 예에서와 같이 사용할 수 있습니다.

여기 JS 솔루션입니다 (HTML에 CSS와 사소한 변경을 수반 위해 jsbin 링크 확인) :

$(window).load(function() { 
    $('.availability').addClass('active'); 
    var interactiveEls = $('.interactive h5'); 
    var activeSections; 

    $(interactiveEls).each(function(index) { 
     $(this).on("click", { idx: index }, function(e) { 
      activeSections = $('.col-md-12.circle-activity > div.active'); 
      if (!(activeSections.length === 1 && $(e.target).parent().hasClass('active'))) { 
      $(e.target) 
       .parent() 
       .toggleClass("active"); 

       var isActive = $(e.target).parent().hasClass('active') ? true : false; 
       var mainImg = $(e.target).parent().siblings('.main-img').find('img'); 

       toggleMainImg(isActive, mainImg, index); 
      } 
     }); 
    }); 

    function toggleMainImg(isActive, mainImg, index) { 
     // a slightly icky switch-case for checking the index against so we know which circ-image needs to be set as the img src. 
     switch (index) { 
      case 0: 
       isActive ? mainImg.prop('src', 'http://lemieux-design.net/profitero/img/circ-4.png') : ''; 
       break; 
      case 1: 
       isActive ? mainImg.prop('src', 'http://lemieux-design.net/profitero/img/circ-1.png') : ''; 
       break; 
      case 2: 
       isActive ? mainImg.prop('src', 'http://lemieux-design.net/profitero/img/circ-3.png') : ''; 
       break; 
      case 3: 
       isActive ? mainImg.prop('src', 'http://lemieux-design.net/profitero/img/circ-2.png') : ''; 
       break; 
      default: 
       break; 
     } 
    } 
}); 

http://jsbin.com/derazegulo/1/edit?html,js,output

보너스는 이미지를 제거하는 것입니다 추가하면 사용 및 수행 :

1. 더하기 및 빼기 단추는 글꼴 아이콘이나 더 나은 성능을 위해 SVG로 바뀌 었습니다.

2. 또한 main-img의 경우 a) 색인 이름을 이미지의 이름과 일치 시키면 스위치 케이스가 불필요하거나 b) 전체 내용이 CSS (또는 SVG)로 바뀔 수 있습니다. .