如何滑动一个div打开，而滑动一个关闭，你点击？

Question

嗯，我已经忙了将近48个小时了，试图为一个需要在明天下午启动和运行的人完成一个网站。在这里，我吃的太多了，无法确定他们要求什么，我能用我现在掌握的技能做些什么(伙计，我有任务要学)。

看看我能不能解释一下：

1. 屏幕上有两个横幅图像，每一个都有更多的内容要公开。
2. 如果用户单击横幅，则应滑动至关闭。下面的方框向下滑动，打开以获取更多内容。
3. 如果单击了另一个横幅，它将经历相同的过程，但是已经打开的横幅应该滑动关闭，原始横幅滑动打开，将其恢复到原来的状态。

到目前为止，我得到的只是一次点击，如果它被点击，就会打开横幅下面的框。如果另一个横幅被点击，它就会关闭，并显示横幅信息。

分配问我猜，但我想我会问，而现在走得更远，因为上帝知道我会被困住。

​

$(function() {
  $('.pp-post-item').on('click', function() {
    let postFullId = jQuery(this).attr('id');
    let postNumId = postFullId.slice(13);
    $('.pp-post-container').not('.element-invisible').addClass('element-invisible');
    $('#pp-post-container-' + postNumId).removeClass('element-invisible');
  });
});

.pp-post {
  color: #ffffff;
  background-color: #3f3f3f;
  margin: 0px;
  padding: 0px;
  max-width: 100%;
  position: relative;
}

.pp-post-item {
  position: relative;
  width: 100%;
}

.pp-post-container {
  overflow: hidden;
}


/* initially hide divs on page load */

.element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pp-post-1" class="pp-post">
  <div id="pp-post-item-1" class="pp-post-item">
    ...
  </div>
</div>
<div id="pp-post-container-1" class="pp-post-container element-invisible">
  ...
</div>
<div id="pp-post-2" class="pp-post">
  <div id="pp-post-item-2" class="pp-post-item">
    ...
  </div>
</div>
<div id="pp-post-container-2" class="pp-post-container element-invisible">
  ...
</div>

​

Answer 1

你在找这样的解决方案吗？根据我对你问题的理解，我建立了这个基础。

​

$(document).ready(function () {
 $('.bottom-layer').hide();
 
 
 $('#banner-one,#banner-two').click(function(){
      $(this).find('.top-layer').slideToggle("slow");
      $(this).find('.bottom-layer').slideToggle("slow");
 })
 
  


});

#banner-container{
  max-width:600px;
  min-height:300px;
  overflow:hidden;
  background-color:#eee;
  display:inline-block;
}

#banner-one{
  min-width:600px;
  min-height:150px;
  background-color:orange;
  cursor:pointer;

 
}
#banner-two{
  min-width:600px;
  min-height:150px;
  background-color:red;
  cursor:pointer;
}

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

<div id="banner-container">
  <div id=banner-one>
      <div class="top-layer">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>
      <div class="bottom-layer">Inside content</div>
  </div>

  <div id=banner-two>
  <div class="top-layer">Top Content</div>
      <div class="bottom-layer">Inside content</div>
  </div>
</div>

​

Answer 2

当单击标题时，我的解决方案将打开下一个div，并关闭所有其他div。

​

$(document).ready(function() {
  $('.toggle').on('click', function() {
    if ($(this).hasClass('closed')) {
      $('h3').removeClass('open');
      $(this).removeClass('closed');
      $(this).addClass('open');
      $('.toggle-content').hide();
      $(this).next('.toggle-content').show();
    } else {
      $(this).removeClass('open');
      $(this).addClass('closed');
      $(this).next('.toggle-content').hide();
    }
  });
});

h3 {
  background-color: #eee;
  color: #000;
}

.toggle-content {
  display: none;
  /* if you want content divs open by default, change to display: block*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="closed toggle">title 1</h3>
  <div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et urna libero. Nullam scelerisque pellentesque porttitor. Ut aliquam malesuada enim, porttitor sodales nisl faucibus eu. Etiam non ex orci. Vestibulum augue mauris, pharetra cursus urna dapibus,
    ullamcorper fermentum nibh. Nullam tincidunt ante sed arcu mollis volutpat. Sed non fringilla eros. Nullam tortor diam, volutpat at ex aliquam, viverra posuere ante. Integer vehicula lacus nisl, in imperdiet lectus condimentum eu.
  </div>
  <h3 class="closed toggle">title 1</h3>
  <div class="toggle-content">
    Vestibulum suscipit laoreet est et faucibus. Pellentesque accumsan magna fermentum mauris sagittis, vel lobortis ante euismod. Nam luctus luctus neque non elementum. In hac habitasse platea dictumst. Donec vel augue eu est volutpat tincidunt porttitor
    id justo. Sed sit amet quam dui. Fusce eget congue ipsum, nec finibus ex. Aliquam vestibulum eget diam at consequat. Morbi vitae neque auctor, posuere velit pharetra, sodales risus. Maecenas eget sodales odio. Etiam faucibus urna eu ligula fringilla
    interdum. Donec pulvinar, enim eget cursus dignissim, dui dolor facilisis felis, varius porta libero urna ac odio. In risus ligula, fringilla sit amet mattis dapibus, elementum eget sapien. Sed vulputate neque nec libero efficitur, a tincidunt nunc
    pulvinar. Donec vehicula malesuada turpis, vel pulvinar massa accumsan eu.
  </div>
</div>

​