樣式更新後丟失CSS類

我將類（rShift）應用於充當菜單選項卡的DIV。該課程給了它一個:hover的行爲。點擊DIV後，我在屏幕上顯示一個菜單。在摺疊菜單時，我也放鬆了課堂和:hover行爲。樣式更新後丟失CSS類

我正在使用jQuery UI，甚至嘗試使用.addClass('')來應用丟失的類，但它不起作用。

參見：http://pastebin.com/hdb8Y2Ke | http://bharath.lohray.com/ftree/

頁面初始加載時，您可以在搜索框的正下方看到頁面左上角的選項卡。懸停鼠標時，它跳出幾個像素。點擊時，出現菜單。再次點擊標籤，菜單崩潰和跳出效果:-(丟失。

我在做什麼錯？

來源

2013-06-25 Lord Loh.

類被添加，但在點擊，您所申請的內嵌樣式到leftmenutab通過jQuery直接。這種風格（左）將覆蓋您有任何樣式的樣式表。

我會刪除你通過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-25 05:44:28

謝謝你的解決方案:-)我希望我可以選擇多個正確的答案。我剛開始懷疑內聯樣式與它有關。 :-) –

我認爲你會發現這個解決方案有點乾淨，並遵循將代碼，標記和樣式分離到適當位置的最佳實踐。 –

+1我看到你很多改進了你的答案。我剛剛去尋求快速解決方案。 – Theraot

後您修改元素的樣式，風格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"); 
    } 
});

最快的解決方法是刪除，而不是modyfing它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-25 05:47:17 Theraot

謝謝！這工作。我到達了Robert McKee發佈的解決方案。但這是我要做的。 –

樣式更新後丟失CSS類

回答

相關問題