在点击后展开div，然后再次点击并恢复正常

对于我制作的网站，我在宽度为20％的容器中放置了5个div。我想要做的是一个帮助我做一件简单事情的函数：当我点击其中一个div时，我希望该div变得更宽，比如40％，其他div从容器变小，比如15％，当我再次点击相同的div以恢复正常，并在从div跳转到另一个时保持转换。在点击后展开div，然后再次点击并恢复正常

我有一个例子，但我在开始与JS，我不会从那里得到它。我想要的是一个简单的功能来做同样的事情。

这里是例子：https://wellingborough.fluencycms.co.uk/

来源

2017-02-19 Alexandru Dincă

请添加您已使用的代码 – 2017-02-19 09:16:30

@gerdi我试过这样的：$（'＃quick> div.quicklink'）。click（function（）{ \t $（this）.animate（{width：“40 ％）}，“slow”）。siblings（）。animate（{'width'：'15％'}，“slow”）; }）; –

一个小更新关于kdureidy anwser： - 它不“切换”的状态，如果你再次点击 - 它并不需要的“盒子”的数量考虑

下面是一个改进版本：

$('body').on('click', '.box', function(e) { 
    var $target = $(this) 
    , targetIsActive = $target.hasClass('active') 
    , $boxes = $('.box') 
    , boxesCount = $boxes.length 
    , inactiveWidth = 100/boxesCount 
    , activeWidth = inactiveWidth * 2 
    , othersActiveWith = (100 - activeWidth)/(boxesCount - 1) 
    ; 
    if(!targetIsActive) { 
     $boxes.removeClass('active').css('width', othersActiveWith + '%'); 
     $target.addClass('active').css('width', activeWidth + '%'); 
    } else { 
     $boxes.removeClass('active').css('width', inactiveWidth + '%'); 
    } 
});

https://jsfiddle.net/xw1e34yy/

来源

2017-02-19 10:11:26 Booster2ooo

谢谢，队友！它运作良好。上帝保佑你们！ ☺ –

像这样：你需要给所有div同一类能够重置有宽度，使用javascript针对点击div来改变宽度，也可以使用过渡使其动画顺利。

$(".box").on("click", function(e) { 
    $(".box").css("width", "15%"); 

    $(e.currentTarget).css("width", "40%"); 
})

https://jsfiddle.net/5s3urL96/

来源

2017-02-19 09:27:07 kdureidy

谢谢！看起来很酷，但是当我再次点击一个框时，我想让所有div恢复到20％的正常宽度。 –

这很简单，使用新的类名为扩展，并检查它 – kdureidy

https://jsfiddle.net/5s3urL96/5/ – kdureidy

在点击后展开div，然后再次点击并恢复正常

回答

相关问题