Question

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

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

主要打开默认网络：

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

两个隐藏的sidenavs（一个在左边，一个在右边）可通过两个按钮显示，并在其中显示链接列表。 sidenavLeft在出现时将主推向右侧，sidenavRight将主推向左侧。只需单击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");
}

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

更改CSS div样式（有条件的吗？）

1 个答案: