Question

我将一个类（rShift）应用于充当菜单选项卡的DIV。该类给它一个:hover行为。点击DIV后，我会在屏幕上显示一个菜单。在折叠菜单时，我也松开了课程和:hover行为。

我正在使用jQuery UI，甚至尝试.addClass('')来应用丢失的类，但它没有用。

请参阅：http://pastebin.com/hdb8Y2Ke | http://bharath.lohray.com/ftree/

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

我做错了什么？

Answer 1

正在添加该类，但点击后，您将通过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");

或者，在点击时添加和删除leftMenuTab和leftMenu中的类，并通过CSS设置样式。像这样：

HTML：

<div class="leftMenu">Hello Menu</div>
<div class="leftMenuTab" data-state="collapsed">
<span class="charIcon"></span>
</div>

JS：

$('.leftMenuTab').click(function(e) {
  $('.leftMenuTab,.leftMenu').toggleClass('expanded');
}

CSS：

.leftMenuTab .charIcon:after{
  content:'>>';
}

.leftMenuTab.expanded .charIcon:after{
  content:'<<';
}
.leftMenuTab {
    background-color: #FFFFFF;
    border-color: #000000;
    cursor: pointer;
    float: left;
    padding-right: 5px;
    position: absolute;
    text-align: right;
    top: 45px;
    width: 30px;
    z-index: 2;
    left: -10px;
}
.leftMenuTab:hover {left:0;}
.leftMenuTab.expanded { left:100px;}

Answer 2

修改元素的样式后，样式left: 0px;将保留在DIV中，这会忽略悬停的效果。

这是相关代码：

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

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

$('.leftMenuTab').click(function(e) {
    temp = $(this);
    if ($('.leftMenuTab').attr('data-state') == "collapsed") {
        $(".charIcon", this).html("&laquo;");
        $('.leftMenuTab').attr('data-state', 'expanded');
        $(".leftMenu").css("left", "+=110px");
        $(".leftMenuTab").css("left", "+=100px");
    } else {
        $(".charIcon", this).html("&raquo;");
        $('.leftMenuTab').attr('data-state', 'collapsed');
        $(".leftMenu").css("left", ""); //set to empty string
        $(".leftMenuTab").css("left", ""); //set to empty string
        //$(this).addClass("rShift"); //Not needed
    }
});

注意：这是使用您网络上的本地副本进行测试的。

样式更新后丢失CSS类

2 个答案: