Javascript 扩张和收缩要素

我的总体目标是点击一个按钮，它会扩展到整个页面的宽度，其他两个按钮会消失。当激活的按钮被点击时，它将返回到初始状态，其他两个按钮将消失

我在这里创建了一个JSFIDLE：

HTML:

JS:

任何帮助都会很棒

HTML：

<div id="staff" class="slide" style="height:568px;">
<div class="staff staff1" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
<div class="staff staff2" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
<div class="staff staff3" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
</div>

JS:

应该有用

我在所有三个staff分区中添加了一个普通类，并添加了一个100%宽度的类。

---

当我在width上添加了对.staff的转换时，它应该是动画的，最后，我将代码放在fadeOut回调上，以防止出现错误的内容。

我会将侦听器更改为只侦听带有类staff的div。我会得到类名和宽度。如果宽度是100%，它已经打开了，所以我只需要使所有div宽度为33%。否则为33%，应为100%，其余为0%

$'div[class*=staff]'。单击函数{ var className=$this.attr'class'； var width=$this.attr'style'； 宽度=width.substringwidth.indexOf'width'+7； ifwidth！='100%；'{ $'div[class！='+className+'][class*=staff]'。每个函数{ $this.animate{width:'0%'}； }; $this.animate{width:'100%}； } 否则{ $'div[class*=staff]'。每个函数{ $this.animate{width:'33%}； }; } }; .职员{ 宽度：100%； } .员工1{ 宽度：33%； 高度：568px； 背景：红色； 浮动：左； } .员工2{ 宽度：34%； 高度：568px； 背景：蓝色； 浮动：左； } .员工3{ 宽度：33%； 高度：568px； 背景：黄色； 浮动：左； }

---

像这样的？我已经更新了我的小提琴，我认为它现在更好了：这是一个，完美！

.staff1{
    width:33%;
    height:568px;
    background:red;
    float: left;
}
.staff2{
    width:34%;
    height:568px;
    background:blue;
    float: left;
}
.staff3{
    width:33%;
    height:568px;
    background:yellow;
    float: left;
}

$('div').click(function(){
    $(this).animate({width:'100%'})
})

<div id="staff" class="slide" style="height:568px;">
<div class="staff staff1" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
<div class="staff staff2" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
<div class="staff staff3" data-hammer="[object Object]" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-transform-origin: 0px 0px 0px; opacity: 1; -webkit-transform: scale(1, 1);"></div>
</div>

.staff {
    width:33%;
    height:568px;
    float: left;
    transition : width 0.3s;
}
.staff1{
    background:red;
}
.staff2{
    width:34%;
    background:blue;
}
.staff3{
    background:yellow;
}
.full {width: 100%}

$('div').click(function(){
    $(".selected").removeClass("selected").removeClass("full");
    $(this).addClass("selected");
    $(".staff:not(.selected)").fadeOut(400, function(){
        $(".selected").addClass("full")
    })
})