değiştir CSS div style (şartlı?)

Question

web sayfasının tam ortasında bir merkez tam ekran ana boru var:

<script> 
$("#main").html('<object data="http://www.myweb.com"/>'); 
</script> 

Ve iki gizli sidenavs (:

<div id="main"></div> 

ana varsayılan bir web açar Biri solda ve bir de sağda) iki düğmeyle ve içlerindeki bağlantıların bir listesiyle gösterilebilir. sidenavLeft, ana görüntülendiğinde sağa iter ve sidenavRight, ana sayfayı sola doğru iter. Varsayılan ana sayfa, sidenav menülerinin içindeki linklere tıklayarak değiştirilebilir.

#main'e nasıl söyleyeceğimi, sidebarLeft görüntülendiğinde sağa, sidebarRight gösterildiğinde sola gidemiyorum. Bunu yapmak için bir CSS koşuluna ihtiyacım var, ama bildiğim kadarıyla CSS'de şartlı destek yok.

/* if the sidebarRight is shown, push the page content to the left */ 
#main { 

    transition: margin-right .5s; 

} 


/* if the sidebarLeft is shown, push the page content to the right */ 
#main { 

    transition: margin-left .5s; 

} 

Bunu CSS/Jquery/javascript ile nasıl yapabilirim? JQuery içinde

Answer 1

:

if ($("#sidebarLeft").is(':visible')) { 
    $("#main").css("transition", "margin-right .5s"); 
} 

Ya da daha: Ayrıca

.transition-right { 
    transition: margin-right .5s; 
} 

if ($("#sidebarLeft").is(':visible')) { 
    $("#main").addClass("transition-right"); 
} 

, düğme tıklama işleyicileri üzerinde bu kodu koymak gerekir. Düğme tetikleyicileri de başka bir şey yapmak için göster/gizle (kenar boşluklarını değiştir)