Question

我的总体目标是点击a并将其扩展到页面的整个宽度，其他2将fadeOut。当单击Active时，它将返回其初始状态，而其他2将会淡入。

我在这里创建了一个JSFiddle： http://jsfiddle.net/tJugd/3534/

HTML：

<div id="staff" class="slide" style="height:568px;">
<div class="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="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="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>

CSS：

.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;
}

JS：

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

任何帮助都会很棒！

Answer 1

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>

CSS：

.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%}

JS：

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

应该工作

我在所有三个人员div中添加了一个公共类，并添加了一个100％宽度的“full”类。当我在宽度上添加到.staff的转换时，它应该是动画的，最后，我将代码放在fadeOut回调的完整内容上，以防止错误的东西。

Answer 2

我会改变监听器只听其中有班级员工的div。我得到了班级名称和宽度。如果宽度是100％它已经打开所以我只需要使所有div的宽度为33％。否则为33％，应该达到100％，其余为0％。

$('div[class*="staff"]').click(function(){
    var className=$(this).attr('class');
    var width=$(this).attr('style');
    width=width.substring(width.indexOf('width')+7);
    if(width!='100%;'){
        $('div[class!="'+className+'"][class*="staff"]').each(function(){
            $(this).animate({width:'0%'});
        });
        $(this).animate({width:'100%'});
    }
    else{
        $('div[class*="staff"]').each(function(){
            $(this).animate({width:'33%'});
        });
    }
});

.staff{
    width:100%;
}
.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="staff" class="slide" style="height:568px;">
<div class="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="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="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>

扩展和收缩元素

2 个答案: