javascript - 更改 CSS div 样式(有条件的？)

Question

在网页的正中间有一个居中的全屏主页面:

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

主要打开一个默认网站:

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

还有两个隐藏的 sidenavs(一个在左边，一个在右边)可以通过两个按钮显示，里面有一个链接列表。 sidenavLeft 在出现时将 main 推向右侧，而 sidenavRight 将 main 推向左侧。只需单击 sidenav 菜单中的链接即可更改默认主页。

我不知道如何对#main 说，显示sidebarLeft 时向右移动，显示sidebarRight 时向左移动。我想我需要一个 CSS 条件来执行此操作，但据我所知，CSS 中没有条件支持。

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

}

我如何使用 CSS/Jquery/javascript 做到这一点？

Answer 1

在 JQuery 中:

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

或者更好:

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

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

此外，您应该将该代码放在按钮单击处理程序中。因此，当按钮触发显示/隐藏时也会执行其他操作(更改边距)