4-部分交互切换

Question

我在做一个交互式图形。全文共分四部分。当一个被点击时，我正在检查其他的是否打开，如果它们是，我正在重新设置它们。

我所说的部分位于这里：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，您可以( a)将索引与图像的名称匹配，这将使切换大小写变得不必要，或者b)将索引转换为CSS (或者再次将SVG)转换为CSS。