Javascript 样式更新后CSS类丢失

我正在将一个类（rShift）应用于充当菜单选项卡的DIV。类给它一个

：hover

行为。单击DIV，我会在屏幕上显示一个菜单。在折叠菜单时，我松开了类和

：hover

行为

我正在使用jQueryUI，甚至尝试了

.addClass（“”）

来应用丢失的类，但没有成功

见:|

最初加载页面时，您可以在页面左上角的搜索框下方看到一个选项卡。鼠标悬停时，它会跳出几个像素。单击后，将显示菜单。再次单击选项卡时，菜单将折叠，跳出效果将丢失：-（

---

我做错了什么？

正在添加该类，但单击后，您将通过jquery直接将内联样式应用于leftmenutab。此样式（左）覆盖样式表中的所有样式

我会删除您通过jquery应用的内联样式，并将您想要的样式添加到css中

创建如下样式：

.leftMenuTab[data-state="expanded"] { left: 100px; }
.leftMenuTab[data-state="collapsed"] { left: 0; }

并从javascript中删除以下行：

$(".leftMenuTab").css("left", "+=100px");
$(".leftMenuTab").css("left", "-=100px");

或者，单击左菜单选项卡和左菜单添加和删除类，并通过CSS设置它们的样式。如下所示：

.leftMenuTab[data-state="expanded"] { left: 100px; }
.leftMenuTab[data-state="collapsed"] { left: 0; }

HTML:

CSS:

.leftMenuTab.charIcon:after{
内容：“>>”；
}
.leftMenuTab.expanded.charIcon:after{
内容：“正在添加该类，但单击时，您将通过jquery直接将内联样式应用于leftmenutab。此样式（左）覆盖样式表中的所有样式

我会删除您通过jquery应用的内联样式，并将您想要的样式添加到css中

创建如下样式：

.leftMenuTab[data-state="expanded"] { left: 100px; }
.leftMenuTab[data-state="collapsed"] { left: 0; }

并从javascript中删除以下行：

$(".leftMenuTab").css("left", "+=100px");
$(".leftMenuTab").css("left", "-=100px");

或者，单击左菜单选项卡和左菜单添加和删除类，并通过CSS设置它们的样式。如下所示：

.leftMenuTab[data-state="expanded"] { left: 100px; }
.leftMenuTab[data-state="collapsed"] { left: 0; }

HTML:

CSS:

.leftMenuTab.charIcon:after{
内容：“>>”；
}
.leftMenuTab.expanded.charIcon:after{
内容：“修改元素的样式后，样式
left:0px；
保留在DIV中，这抵消了悬停的影响

以下是相关代码：

$('.leftMenuTab').click(function(e) {
    temp = $(this);
    if ($('.leftMenuTab').attr('data-state') == "collapsed") {
        $(".charIcon", this).html("«");
        $('.leftMenuTab').attr('data-state', 'expanded');
        $(".leftMenu").css("left", "+=110px");
        $(".leftMenuTab").css("left", "+=100px");
    } else {
        $(".charIcon", this).html("»");
        $('.leftMenuTab').attr('data-state', 'collapsed');
        $(".leftMenu").css("left", "-=110px");
        $(".leftMenuTab").css("left", "-=100px");
        $(this).addClass("rShift");
    }
});

最快的修复方法是删除
left
样式，而不是修改它（并且不需要再次添加该类）：

注意：这是使用web上的本地副本测试的。
修改元素的样式后，样式
left:0px；
保留在DIV中，这抵消了悬停的影响

以下是相关代码：

$('.leftMenuTab').click(function(e) {
    temp = $(this);
    if ($('.leftMenuTab').attr('data-state') == "collapsed") {
        $(".charIcon", this).html("«");
        $('.leftMenuTab').attr('data-state', 'expanded');
        $(".leftMenu").css("left", "+=110px");
        $(".leftMenuTab").css("left", "+=100px");
    } else {
        $(".charIcon", this).html("»");
        $('.leftMenuTab').attr('data-state', 'collapsed');
        $(".leftMenu").css("left", "-=110px");
        $(".leftMenuTab").css("left", "-=100px");
        $(this).addClass("rShift");
    }
});

最快的修复方法是删除
left
样式，而不是修改它（并且不需要再次添加该类）：

注意：这是用您网站上的本地副本测试的。
感谢您提供的解决方案：-）我希望我能选择多个正确答案。我刚刚开始怀疑内联样式与此有关。：-）我想你会发现这个解决方案更简洁，并且遵循最佳实践，将代码、标记和样式分离到适当的位置。+1我看到你的答案有了很大的改进。我只是选择了快速解决方案注意。感谢您提供的解决方案：-）我希望我能选择多个正确答案。我刚刚开始怀疑内联样式与此有关。：-）我想您会发现此解决方案更简洁，并遵循将代码、标记和样式分离到适当位置的最佳实践。+1我看到您改进了ans我们很多。我只是寻求快速解决方案。谢谢！这很有效。我得到了罗伯特·麦基发布的解决方案。但这是我要做的。谢谢！这很有效。我得到了罗伯特·麦基发布的解决方案。但这是我要做的。