Question

我希望能够即时更改导航栏的位置，从而相应调整剩余内容。

所以，我有一个功能网站。默认情况下，顶部有一个菜单导航栏。我所做的是在该菜单上添加了一个“编辑”按钮，以便单击该菜单时，您会看到4个复选框的列表，可以选择是否要将该菜单放置在顶部（默认），左侧，右侧或底部。其他内容也会相应移动（例如，左侧菜单，内容向右稍等）。所以基本上，我有这样的东西：

// css for menu positioning to the left
.navbar-left {
    width: 25%;
    height: auto;
}

.content-right {
    position: relative;
    left: 200px;
}

// css for menu positioning to the bottom
.navbar-bottom {
    position: relative;
    bottom: 0;
    left: 0;
    height: 200px;
}

.content-up {
    position: relative;
    bottom: 200px;
}

在JS中，我做类似的事情

if($("#left"):checked){
    $("#menu-bar").addClass("navbar-left");
    $("#content").addClass("content-right");
} else if ($("#bottom"):checked){
    $("#menu-bar").addClass("navbar-bottom");
    $("#content").addClass("content-up");
}

现在，我的样式比这更多，但这与当前的问题无关。问题是，当我选择“左”时，它的样式正确，但是当我将其更改为“下”时，它仍然使用“左”位置的样式并将新样式添加到其中。

现在我通过使用.removeClass（）方法删除以前的类来解决该问题，如下所示：

if($("#left"):checked){
    $("#menu-bar").removeClass("navbar-bottom navbar-right").addClass("navbar-left");
    $("#content").removeClass("content-up content-down").addClass("content-right");
} else if ($("#bottom"):checked){
    $("#menu-bar").removeClass("navbar-right").addClass("navbar-bottom");
    $("#content").removeClass("content-down").addClass("content-up");
}

基本上，现在我大约有一百行代码，仅添加所选位置的类别，同时删除我每次添加的其他三个选择的所有类别。

所以，最后一个问题是：还有其他方法可以剥离以前使用的所有类（只需将所有内容设置为初始值，如加载页面时一样），而不是手动删除所有这些类？

Answer 1

我从未尝试过将类重置为其初始状态，但是您可以肯定地在一行代码中将它们从单个元素中清除掉：

要将所有现有类替换为另一个类，我们可以改用.attr（“ class”，“ newClass”）。来源：https://api.jquery.com/removeclass/

您可以将其与.toggleClass或其他方法结合使用。

如果我现在必须坐下来做，基于对问题的理解，我将隐藏原始元素，并使用所需的类添加新元素，然后还原删除新元素并恢复原始版本。

快速更改具有js或jquery的元素CSS样式

1 个答案: