如何根据另一个div的班级增加/减少宽度？

时间：2018-12-24 07:06:43

标签： javascript jquery timeline

我已经为我的网站设计了流程时间表。

代码如下：

$('.pt-action-bar > .pt-action-bar-button').click(function () {
    $(this).toggleClass('pt-action-bar-button--active').siblings().removeClass('pt-action-bar-button--active');
});
.process-timeline {
    position: relative
}

.process-timeline .pt-timeline {
    top: 57px;
    left: 85px;
    right: 85px;
    position: absolute;
    display: none;
    height: 1px
}

@media (min-width: 768px) {
    .process-timeline .pt-timeline {
        display: block
    }
}

.process-timeline .pt-timeline__backside-bar {
    height: 1px;
    background-color: #ebebeb
}

.process-timeline .pt-timeline__frontside-bar {
    width: 0;
    height: 1px;
    top: 0;
    left: 0;
    position: absolute;
    background-color: #00cdac;
    -webkit-transition: width .4s ease;
    transition: width .4s ease
}

.process-timeline .pt-action-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media (min-width: 768px) {
    .process-timeline .pt-action-bar {
        position: relative;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.process-timeline .pt-action-bar-button {
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: none;
    border: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    outline: none;
    padding: 0;
    width: 170px;
    cursor: pointer
}

.process-timeline .pt-action-bar-button__background-number {
    top: 0;
    left: 50%;
    position: absolute;
    color: #ebebeb;
    font-family: CamphorBold;
    font-weight: 800;
    font-size: 100px;
    line-height: 1em;
    -webkit-transition: top .4s ease;
    transition: top .4s ease;
    opacity: .3;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.process-timeline .pt-action-bar-button-icon {
    width: 114px;
    height: 114px;
    position: relative;
    margin: 0 auto
}

.process-timeline .pt-action-bar-button-icon__inner-ring-1 {
    width: 114px;
    height: 114px;
    top: 0;
    left: 0;
    position: absolute;
    border: 1px solid #ebebeb;
    border-radius: 100px;
    opacity: .2;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease
}

.process-timeline .pt-action-bar-button-icon__inner-ring-2 {
    width: 84px;
    height: 84px;
    left: 15px;
    position: absolute;
    top: 15px;
    border: 1px solid #ebebeb;
    border-radius: 100px;
    opacity: .5;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease
}

.process-timeline .pt-action-bar-button-icon__inner-ring-3 {
    width: 54px;
    height: 54px;
    left: 30px;
    position: absolute;
    top: 30px;
    border: 1px solid #ebebeb;
    border-radius: 100px;
    opacity: .8;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease
}

.process-timeline .pt-action-bar-button-icon__inner-ring-4 {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 205, 172, 0.4);
    box-shadow: 0 4px 8px 0 rgba(0, 205, 172, 0.4);
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

.process-timeline .pt-action-bar-button-icon__inner-ring-4,
.process-timeline .pt-action-bar-button-icon__inner-ring-5 {
    width: 26px;
    height: 26px;
    left: 44px;
    position: absolute;
    top: 44px;
    background-color: #00cdac;
    border: 6px solid #00cdac;
    border-radius: 100px
}

.process-timeline .pt-action-bar-button-icon__inner-ring-5 {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease
}

.process-timeline .pt-action-bar-button-icon__inner-ring-6 {
    width: 14px;
    height: 14px;
    left: 50px;
    position: absolute;
    top: 50px;
    background-color: #fff;
    border-radius: 100px;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease
}

.process-timeline .pt-action-bar-button__title {
    top: -20px;
    position: relative;
    font-family: CamphorRegular;
    font-size: 18px;
    line-height: 24px;
    -webkit-transition: color .4s ease;
    transition: color .4s ease;
    color: #cfd7df
}

.process-timeline .pt-action-bar-button__text {
    color: #6b7c93;
    font-family: CamphorThin;
    font-size: 14px;
    line-height: 24px;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

@media (min-width: 768px) {
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button__background-number {
        top: -60px
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-1 {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-2 {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-3 {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-4 {
        opacity: 1
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-5 {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-6 {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button__title {
        color: #0e2b5c
    }
    .process-timeline .pt-action-bar-button--active .pt-action-bar-button__text {
        opacity: 1
    }
    .process-timeline .pt-action-bar-button__text {
        opacity: 0
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="process-timeline">
                                    <div class="pt-timeline">
                                        <div class="pt-timeline__backside-bar">
                                            <div class="pt-timeline__frontside-bar" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                    <div class="pt-action-bar"><button class="pt-action-bar-button pt-action-bar-button--active">
                                            <div class="pt-action-bar-button__background-number">
                                                01
                                            </div>
                                            <div class="pt-action-bar-button-icon">
                                                <div class="pt-action-bar-button-icon__inner-ring-1"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-2"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-3"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-4"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-5"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-6"></div>
                                            </div>
                                            <div class="pt-action-bar-button__title">Fast development</div>
                                            <div class="pt-action-bar-button__text">Ruby on Rails is perfect for
                                                producing high quality code very quickly. If you want your project to
                                                be ready for a deadline or hit the market fast, Ruby is the way to go.</div>
                                        </button><button class="pt-action-bar-button">
                                            <div class="pt-action-bar-button__background-number">
                                                02
                                            </div>
                                            <div class="pt-action-bar-button-icon">
                                                <div class="pt-action-bar-button-icon__inner-ring-1"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-2"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-3"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-4"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-5"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-6"></div>
                                            </div>
                                            <div class="pt-action-bar-button__title">Fast prototyping</div>
                                            <div class="pt-action-bar-button__text">Developing a software project from
                                                scratch can be a long process, but RoR allows for creating MVPs quickly
                                                thanks to dozens of ready-made libraries.</div>
                                        </button><button class="pt-action-bar-button">
                                            <div class="pt-action-bar-button__background-number">
                                                03
                                            </div>
                                            <div class="pt-action-bar-button-icon">
                                                <div class="pt-action-bar-button-icon__inner-ring-1"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-2"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-3"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-4"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-5"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-6"></div>
                                            </div>
                                            <div class="pt-action-bar-button__title">Libraries for every occasion</div>
                                            <div class="pt-action-bar-button__text">The Ruby community has created a
                                                rich repository of libraries, called gems. Gems are ready-made
                                                solutions and make development much easier and faster.</div>
                                        </button><button class="pt-action-bar-button">
                                            <div class="pt-action-bar-button__background-number">
                                                04
                                            </div>
                                            <div class="pt-action-bar-button-icon">
                                                <div class="pt-action-bar-button-icon__inner-ring-1"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-2"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-3"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-4"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-5"></div>
                                                <div class="pt-action-bar-button-icon__inner-ring-6"></div>
                                            </div>
                                            <div class="pt-action-bar-button__title">Highest standard of web
                                                development</div>
                                            <div class="pt-action-bar-button__text">RoR has been battle-tested by many
                                                developers in commercial projects. At Netguru, we can deliver
                                                high-quality large-scale projects successfully.</div>
                                        </button></div>
                                </div>

现在这就是我想要的：

将“ .pt-action-bar-button-active”添加到“ pt-action-bar-button”后，“。pt-timeline__frontside-bar”的宽度应增加/减少33％。 这样线条也将变为绿色。

我正在附上屏幕截图，以便您了解我想要的内容： enter image description here

1 个答案:

答案 0 :(得分：0)

也许是这样？ JSFiddle：http://jsfiddle.net/s7xvpa23/1/ 

$('.pt-action-bar > .pt-action-bar-button').click(function () {
    $(this).toggleClass('pt-action-bar-button--active').siblings().removeClass('pt-action-bar-button--active');

   let buttonsArr = Array.from($('.pt-action-bar').children('button'));

   buttonsArr.forEach((button, index) => {
    if(button.className.indexOf('active') !== -1){
      if(index === 0){
        $('.pt-timeline__frontside-bar').css('width', '0%');
      }
      else if(index === 1){
        $('.pt-timeline__frontside-bar').css('width', '33%');
      }
      else if(index === 2){
        $('.pt-timeline__frontside-bar').css('width', '66%');
      }
      else if(index === 3){
        $('.pt-timeline__frontside-bar').css('width', '100%');
      }
    }
   });
});
相关问题
最新问题