javascript - 4 节交互式拨动开关

Question

我正在制作交互式图形。有4个部分。单击其中一个时，我会检查其他的是否打开，如果打开，我将重置它们。

我正在谈论的部分位于此处:http://lemieux-design.net/profitero/就是圆图。

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

Answer 1

这绝对有可能。

首先，您可以通过两种方式简单地解决您的问题，而不是进行所有不同类型的检查:

1. 删除 TweenLite 依赖项，使用它的所有内容(据我所知)都可以使用 CSS 动画轻松完成。

2. 由于您将 jQuery 用于您的选择器，因此您可以使用通用选择器并按照我在下面的示例中所做的方式定位同级。

这是 JS 解决方案(检查 jsbin-link 以了解随附的 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. 加号和减号按钮可以是字体图标，也可以变成 SVG 以获得更好的性能。

2. 另外，对于 main-img，您可以 a) 将索引与图像的名称匹配，这将使 switch-case 变得不必要，或者 b) 将其整个转换为 CSS(或再次使用 SVG ).