0

我正在将一个类 (rShift) 应用于充当菜单选项卡的 DIV。该类赋予它一种:hover行为。单击 DIV 时，我会在屏幕上显示一个菜单。在折叠菜单时，我也失去了类和:hover行为。

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

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

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

我究竟做错了什么？

4

2 回答 2

2

正在添加该类，但单击时，您将通过 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;}
于 2013-06-25T05:44:28.323 回答
1

修改元素的样式后，样式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
    }
});

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

于 2013-06-25T05:47:17.233 回答