Question

对我的代码有一个疑问，我正在创建两个弹出窗口，每个窗口占据一半。我对JavaScript和jQuery相当陌生，所以我想确保自己做对了。有没有一种方法可以使单击时左侧从左侧滑出，右侧从右侧滑出。另外，如果您发现有任何需要改进的地方，请告诉我。

HTML

<div class="main-menu">
  <a class="contact-btn" href="#">Contact</a>
  <a class="menu-btn" href="#">Menu</a>
  <div class="split left-side">
    <h1>Contact Form</h1>
  </div>
  <div class="split right-side">
    <div id="nav-outer">
        <div id="mobile-menu"></div><!-- end #mobile-menu -->
        <div id="topnav">
            <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
        </div><!-- end #topnav -->
    </div><!-- #nav-outer -->
    <div class="logo-sidebar">
      <img src="/wp-content/uploads/2018/10/logo.png" alt="">
    </div>
  </div>
</div>

脚本

  $('.right-side').hide();
  $('.left-side').hide();
  $('.menu-btn').click(function(){
    $('.right-side').slideToggle('slow', function(){});

  });
  $('.contact-btn').click(function(){
    $('.left-side').slideToggle('slow', function(){});
  });

Answer 1

看看CSS动画和/或Jquery动画。

这里是一个简短的解释：
首先，您想使用一些CSS来隐藏您的容器。对于此示例，我假设我们只有一个容器。因此，此容器占据了屏幕的50％，因此必须隐藏在屏幕的左侧或右侧。这可以通过position: absolute或position: relative;或最适合您的方法来完成。
这将是非常简短的JQuery代码：

$(".slide").click(function(){
    $("div").animate({left: '0px'}, 1000);
});

1000是动画持续时间，在这种情况下为1秒。现在在正确的网站上执行相同操作。
希望对您有一个基本的了解：

$("button").click(function(){
    $("div").animate({left: '0px'}, 1000);
});

div {
  display: block;
  height: 200px;
  width: 200px;
  background: black;
  position: absolute;
  left: -200px;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>click</button>

作为替代方案，您可以看一下JQuery-UI滑块，但是我建议您使用“普通” JQuery解决所有问题，直到您对JQuery的工作方式有了充分的了解。

Answer 2

您可以使用jui ui slide effect来做到这一点。

$('.right-side').hide();
$('.left-side').hide();
$('.menu-btn').click(function() {
  $('.right-side').toggle('slide', {direction: 'right'});
});
$('.contact-btn').click(function() {
  $('.left-side').toggle('slide', {direction: 'left'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div class="main-menu">
  <a class="contact-btn" href="#">Contact</a>
  <a class="menu-btn" href="#">Menu</a>
  <div class="split left-side">
    <h1>Contact Form</h1>
  </div>
  <div class="split right-side">
    <h1>Menu</h1>
  </div>
</div>

半屏侧边栏校正

2 个答案: