Question

我正在制作互动图片。共有4个部分。当点击一个，我正在检查其他人是否打开，如果他们是，我正在重置它们。

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

客户还希望用户能够折叠任何打开的零件。我不确定我是否可以在所有其他条件下继续这样做。任何猜测？

Answer 1

这绝对是可能的。

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

删除TweenLite依赖项，您使用它的所有内容（据我所知）您可以使用CSS动画轻松完成。
由于您为选择器使用了jQuery，因此您可以按照我在下面的示例中所做的方式使用常规选择器和目标兄弟。

这是JS解决方案（查看随附CSS的jsbin-link和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

额外的好处是摆脱你正在使用和执行的图像：

加号和减号按钮可以是字体图标，也可以转换为SVG以获得更好的性能。
同样对于main-img，您可以a）将索引与图像的名称相匹配，这将使得不需要switch-case，或者b）将整个内容转换为CSS（或者再次转换为SVG））。

4节交互式切换

1 个答案: