javascript - 单击时将 body 向左移动

Question

我有这个导航栏代码:

<nav class="navbar navbar-inverse navbar-fixed-top navTop">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <ul id="otis">




    </div>
    <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right navSelected" id="topNav">
            <li ><a href="index.php" class="home"> HOME</a></li>
            <li><a href="about.php" class="about1"> ABOUT</a></li>
            <li><a href="services.php" class="service"> SERVICES</a></li>
            <li><a href="news.php" class="newsNav"> NEWS</a></li>
            <li><a href="#" class="contact" id="contact"> CONTACT</a></li>


        </ul>
    </div><!--/.nav-collapse -->

</div></nav>

所以我想要的只是当我点击菜单中的联系人以在右侧打开一个新的div并将整个 body 移动到左侧并显示新的div

新的 div 有这样的代码:

<div id="contactUs" class="contactus">
<div class="contactUs text-center">


    </div>
    <div class="text-center">
        Contact Us
        <div class="col-md-12">



            <input type="text" class="form-control">
            <input type="text" class="form-control">
            <input type="text" class="form-control">
            <input type="text" class="form-control">




        </div>
    </div></div>

我把它放在 CSS 中:

#contactUs{
background-color: black;
height: 100vh;
display: none;
width: 25vw;
float: right;
 }

这是脚本:

<script type="text/javascript">
 $('#contact').click(function(){
$('#contactUs').toggle();
});
</script>

新的 div 正在显示，但 body 没有移动任何帮助？提前谢谢你

Answer 1

$('#contact').click(function(){
  $('#contactUs').toggle();
  $('body').toggleClass('slideLeft');
});

body {
  position: relative;
  left: 0;
  transition: 0.3s;
}
body.slideLeft {
  left:-25vw;
}