ändern CSS div style (bedingtes?)

Question

Haben Sie eine zentrierte Vollbild Haupt ganz am Mitte der Webseite:

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

Der Haupt öffnet sich ein Standard-Web:

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

Und zwei versteckte sidenavs (eine auf der linken und eine auf der rechten Seite), die durch zwei Knöpfe und mit einer Liste von Links innerhalb von ihnen gezeigt werden kann. sidenavLeft schiebt den Hauptrechner nach rechts, wenn er erscheint, und sidennavRight schiebt den Hauptrechner nach links. Die Standard-Hauptseite kann durch Klicken auf die Links in den SideNav-Menüs geändert werden.

Ich kann nicht herausfinden, wie man zu #main sagt, bewegen Sie sich nach rechts, wenn die SidebarLeft gezeigt wird und nach links, wenn die SidebarRight angezeigt wird. Ich denke, dass ich dafür eine CSS-Bedingung brauche, aber soweit ich weiß, gibt es in CSS keine bedingte Unterstützung.

/* 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; 

} 

Wie kann ich das mit CSS/Jquery/Javascript?

Answer 1

In JQuery:

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

Oder besser:

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

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

Außerdem sollten Sie diesen Code auf Ihre Schaltfläche klicken Handler setzen. Also, wenn Button auslöst show/hide, um auch etwas anderes zu tun (Ränder ändern)