四节互动切换

Question

我正在制作一个交互式图形。有4个部分。点击时，我正在检查其他人是否开放，如果他们是，我正在重置他们。

我在说的部分位于这里：http://lemieux-design.net/profitero/这是圆形图。

客户端还希望用户能够折叠任何打开的部分。我不确定是否可以在所有其他条件继续下去的情况下做到这一点。任何猜测？

Answer 1

这绝对有可能。的

首先而不是所有不同类型的检查，你可以简单的方式有两种解决方案：

1. 取出TweenLite的依赖，你使用它的一切（只要我可以告诉），你可以用CSS动画轻松完成。

2. 由于您使用jQuery作为选择器，因此您可以按照以下示例中的方式使用常规选择器和目标兄弟。

这里的JS解决方案（检查jsbin链接陪同CSS和小的改动HTML）：

$(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. 加号和减号按钮可以是一个字体图标或变成SVGs以获得更好的性能。

2. 而且主-IMG你既可以一）匹配索引图像的名字，这会使得开关的情况下不必要的，或者b）把它转换成整个事情到CSS（或再次SVG） 。