javascript - 如何在滑动关闭您单击的 div 的同时滑动打开该 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>