4-Section Interactive Toggle

Question

Ich arbeite an einer interaktiven Grafik. Es gibt 4 Teile. Wenn jemand angeklickt wird, überprüfe ich, ob die anderen offen sind und wenn sie sind, setze ich sie zurück.

Der Abschnitt, über den ich spreche, befindet sich hier: http://lemieux-design.net/profitero/ Es ist die Kreisgrafik.

Der Client möchte auch, dass der Benutzer alle offenen Teile ausblenden kann. Ich bin mir nicht sicher, ob ich das mit all den anderen Bedingungen machen kann. Irgendwelche Ideen?

Answer 1

Es ist definitiv möglich.

Erstens, anstatt die alle mit unterschiedlichen Arten von Kontrollen können Sie einfach Ihre Lösung auf zwei Arten:

1. Entfernen Sie die TweenLite Abhängigkeit, alles, was Sie es für verwenden (soweit ich das beurteilen kann) können Sie Mach es einfach mit CSS-Animationen.

2. Da Sie jQuery für Ihre Selektoren verwenden, können Sie einen allgemeinen Selektor und Ziel-Geschwister wie im folgenden Beispiel verwenden.

Hier ist die JS-Lösung (überprüfen jsbin-Link für CSS und kleinere Änderungen an HTML-Begleit):

$(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

Ein zusätzlicher Bonus loszuwerden der Bilder bekommen würden Sie verwenden und tun:

1. Die Plus- und Minus-Schaltflächen können entweder ein Schriftart-Symbol oder sein verwandelte sich in SVGs für eine bessere Leistung.

2. Auch für die main-img könnte man entweder a) den Index an die Namen der Bilder anpassen, was den switch-case überflüssig machen würde, oder b) das ganze Ding in CSS umwandeln (oder wieder SVG) .