在JS上添加边框后，填充项使物品移动

我正在使用Ul Li制作子菜单。当您显示子菜单时，li将显示为没有任何边框。在JS上添加边框后，填充项使物品移动

通过简单的JavaScript代码，当你点击一个里我这样做：

.actif-link { 
    border: 1px solid rgb(173, 178, 178); 
    padding: 5px; 
}

关于JS：

$("ul.filter-ul > li > label > a").on("click", function(event) { 
    event.preventDefault(); 
    $this = $(this); 

    if ($this.hasClass("actif-link")) { 
     $this.removeClass("actif-link"); 
    } else { 
     $this.addClass("actif-link");   
    } 
});

嘛。问题是，我的项目排列是这样的：

物品1，ITEM2-项目3

想象我点击第一个项目，当我加入我的课（与边框+内部填充）我有这样的：

item1 - item2-item3

被点击的项目移动。

这真的很麻烦，我没有找到实际解决的办法。

我应该把每个项目放在一个固定宽度的DIV中，并将边框应用到宽度上吗？没有其他办法吗？

我提前感谢您花费在我的请求上的时间。

来源

2015-06-23 Jay Cee

你可以发表小提琴吗？ –

你是对的，这里是一个小提琴： https://jsfiddle.net/bj14efaj/ –

项目正在移动，因为您正在为每一侧添加额外的6像素，而这些像素并不在其中。当物品第一次渲染时，它可能是x像素宽，但点击时，现在是border + padding + x + padding + border像素宽。

一个快速的解决方法是立即在物品上设置边框和内边距，但是设置了border-color: transparent。然后在点击事件中，您可以将颜色更改为任何您想要的。填充从未受到影响，并且边框总是存在大小，但仅在需要时才显示。

编辑：这是你的更新提琴https://jsfiddle.net/bj14efaj/3/

来源

2015-06-23 16:24:00 0dyss3us

芜it它的作品！谢谢0dyss3us –

您可以在您的css中添加display:block;或display:inline-block;吗？

.actif-link { 
    border: 1px solid rgb(173, 178, 178); 
    padding: 5px; 
}

填充确实有效。如果你想填充只出现在右边，请添加填充，而不是填充。

来源

2015-06-23 15:49:47 guergana

如果我理解你的问题，那么我建议加上

position:relative

和.actif-link类也增加

left:-1px; right:-1px; top:-1px; bottom:-1px;

编辑

好遗憾没有摆弄这是很难想像。

因此，这里是我的解决方案：

border : 1px solid transparent

这一个解决becouse它存在的所有问题，但它不动，只是上色

退房the fiddle，让我知道，如果它是什么您是否在寻找:)

我也超载您课程，以帮助它工作:)

来源

2015-06-23 15:56:08

好吧，它没有改变，然后我添加了一个小提琴，以显示当你点击时发生了什么，我的意思是“该项目点击“ –

”后，我正在移动好吧，我改变它。请检查并让我知道:) –

它也可以，谢谢:) –

在JS上添加边框后，填充项使物品移动

回答

相关问题