在JS单击上添加边框后填充使项目移动

Question

我有一个用 Ul Li 制作的子菜单。 显示子菜单时，li 显示为无边框。

使用一个简单的 javascript 代码，当你点击一个 li 时，我会这样做：

.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-项目2-项目3

想象一下，当我添加我的类（带有边框+内部填充）时，我点击了第一项：

item1--item2-item3

点击的项目移动。

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

我应该将每个项目放在具有固定宽度的 DIV 中并将边框应用于宽度吗？没有别的办法吗？

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

Answer 1

项目正在移动，因为您要为开始时不存在的每一侧添加额外的 6 个像素。当项目第一次渲染时，它可能是 x 像素宽，但是当点击时，它现在是 border + padding + x + padding + border 像素宽。

一个快速的解决方法是立即设置项目的边框和填充，但设置border-color: transparent。然后在点击事件上，您可以将颜色更改为您想要的任何颜色。填充永远不会受到影响，并且边框总是存在大小，但只有在需要时才能看到。

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

Answer 2

你能在你的css中添加display:block;或display:inline-block;吗？

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

填充确实有效。如果您希望填充仅出现在右侧，请添加 padding-right 而不是填充。

Answer 3

如果我理解你的问题，我建议添加

position:relative

在课堂上.actif-link也添加

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

编辑

好吧，抱歉，这很难想象。

所以这是我的解决方案：

border : 1px solid transparent

这个解决了所有问题，因为它存在但它不动，只是着色

查看 the fiddle 并告诉我是否是您要找的东西 :)

我也重载你的类来帮助它工作:)