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并移动整个身体向左移动并显示新的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显示但身体没有任何帮助？提前谢谢你

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是一些使用CSS转换的示例代码，可以为您提供一个想法。

$(function() {
  $('#contact').on('click', function() {
    $('body').addClass('show-contact-panel');
  });
  
  // ADD YOUR OWN CLOSE LOGIC
  $('.content').on('click', function() {
    $('body').removeClass('show-contact-panel');
  });
});

body {
  overflow-x: hidden;
  position: relative;
  transition: 0.3s all;
}
.content {
  height: 500px;
  background: #ff0;
}
.contact-panel {
  height: 500px;
  width: 300px;
  background: #f00;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(300px);
}
body.show-contact-panel {
  transform: translateX(-300px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="navigation">
  <a href="javascript:void(0)" id="contact">contact</a>
</div>
<div class="content"></div>
<div class="contact-panel"></div>
</body>

点击时将身体移动到左侧

2 个答案: