一个小更新关于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 09:16:30
@gerdi我试过这样的:$('#quick> div.quicklink')。click(function(){ \t $(this).animate({width:“40 %)},“slow”)。siblings()。animate({'width':'15%'},“slow”); }); –