Question

好吧，我已经开始了将近48个小时，现在试图为明天下午需要运行的人完成一个网站。我咬得比他们所要求的还要多，这对我现在所掌握的技能有什么影响（男人，我有很多东西需要学习）。

让我们看看能不能解释一下：

屏幕上有两个横幅图片，每个图片都有更多要展示的内容。
如果用户点击横幅，则应向上滑动以关闭横幅。它下方的框向下滑动以打开更多内容。
如果单击另一个横幅，它将经历相同的过程，但已经打开的横幅应该滑动关闭并且原始横幅滑动打开，使其恢复到原始状态。

到目前为止，我所得到的只是一个点击，如果点击它，会弹出横幅下面的框。如果单击另一个横幅，则会关闭，并显示横幅信息。

分配问我猜，但是我想现在问我进一步了解因为领主知道我会被困住。

$(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>

如何滑动div打开，同时滑动一个关闭的单击？

2 个答案: