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");           
    }
});

好。问题是我的项目是这样对齐的：

ITEM1-ITEM2-项目3

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

ITEM1 - ITEM2-项目3

点击的项目移动。

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

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

我提前感谢你花了我的要求。

Answer 1

项目正在移动，因为您为每个开头添加额外的6个像素。首次渲染项目时，它可能是 x 像素宽，但单击时，它现在是 border + padding + x + padding + border 像素宽。

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

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

Answer 2

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

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

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

Answer 3

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

position:relative

并在课程.actif-link中添加

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

修改

很抱歉没有小提琴，很难想象。

所以这是我的解决方案：

border : 1px solid transparent

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

查看the fiddle并告诉我您是否正在寻找：）

我也重载你的类以帮助它工作：）

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

3 个答案: