JS扩展并显示不显示所有块的块

Question

我有下面的代码显示框，一旦你点击一个框，它会展开并显示更多信息，然后你可以关闭再次查看这些框。出于某种原因，即使我已经放了7个列表项，但并非所有列表项都出现，并且它们没有按照我将它们放在html中的顺序出现。

我非常仔细地阅读了一个教程，但是我找不到导致它只以这个随机顺序显示几个框的代码部分。

function openSchool() {
  $('.school-container li .school-block').click(function() {
    if (!$(this).hasClass('active')) {
      $(this).addClass('active');

      var setLeftPos = $('.school-container li .school-block.active').position().left,
        setRightPos = -setLeftPos + $('.school-container').width() - $(this).width(),
        schoolBlock = $(this);
      state = $(this).children('.state');

      $(schoolBlock).css('left', setLeftPos);
      $(schoolBlock).css('right', setRightPos);

      $(schoolBlock).animate({
        'bottom': '0',
        'top': '0',
        'min-width': ''
      }, {
        duration: 250,
        queue: false
      });
      $(schoolBlock).animate({
        'left': '0',
        'right': '0'
      }, {
        duration: 250,
        queue: false
      });
      $(state).animate({
        width: '40%'
      }, {
        duration: 250,
        queue: false
      });

      setTimeout(function() {
        $('.schools').css('width', '59%');
        $('.school-list').addClass('fade');
        $('.closeSchool').addClass('fade');
      }, 300);

      $('.closeSchool').click(function() {
        $('.school-container li .school-block.active').dequeue().animate({
          'bottom': '100%',
          'top': '0',
          'min-width': '200px',
          'left': setLeftPos,
          'right': setRightPos
        }, 250, function() {
          $('.school-container li .school-block.active').removeClass('active');
          var setLeftPos = 0;
          var setRightPos = 0;

        });
        $(state).animate({
          width: '96%'
        }, {
          duration: 250,
          queue: false
        });

        $('.schools').css('width', '1%');
        $('.school-list').removeClass('fade');
        $('.closeSchool').removeClass('fade');
        $('.map').removeClass('slide');
      });
    } else {
      console.log('doesnt');
    }
  });

  $('.address').click(function() {
    $('.map').addClass('slide');
    $('.slide').click(function() {
      $('.map').removeClass('slide');
    });
  });

}

function functionInit() {
  openSchool();
}

$(function() {
  functionInit();
});

body {
  background: #2c3e50;
}
section.school-finder {
  padding: 40px 0;
  font-family: 'Open Sans', sans-serif;
  width: 1260px;
  margin: 0 auto;
}
section.school-finder h2 {
  color: #ecf0f1;
}
section.school-finder .school-container {
  position: relative;
  height: 400px;
  clear: both;
  overflow: hidden;
  margin-top: 30px;
}
section.school-finder li {
  display: inline-block;
  margin-left: .5%;
  width: 200px;
  min-height: 200px;
}
section.school-finder li .school-block {
  position: absolute;
  top: 0;
  bottom: 100%;
  min-height: 200px;
  min-width: 200px;
  right: auto;
  cursor: pointer;
  background: #1abc9c;
}
section.school-finder li .school-block .state {
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  width: 96%;
  display: inline-block;
  vertical-align: middle;
}
section.school-finder li .school-block .state span {
  display: block;
}
section.school-finder li .school-block .state .img {
  min-height: 104px;
  position: relative;
}
section.school-finder li .school-block .state img {
  opacity: .4;
}
section.school-finder li .school-block.active {
  z-index: 100;
  cursor: inherit;
}
section.school-finder li .school-block .schools {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 1%;
  overflow: hidden scroll;
  position: relative;
}
section.school-finder li .school-block .schools ul.school-list {
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 5%;
}
section.school-finder li .school-block .schools ul.school-list li {
  color: #fff;
  display: block;
  margin-right: 0;
  width: 100%;
  min-height: inherit;
  padding: 35px 0;
  border-bottom: 1px dashed #fff;
  background-repeat: repeat no-repeat;
  background-position: bottom;
}
section.school-finder li .school-block .schools ul.school-list li div.location {
  display: inline-block;
  vertical-align: middle;
  max-width: 300px;
}
section.school-finder li .school-block .schools ul.school-list li div.location span.city {
  display: block;
  font-size: 1.2em;
  margin-bottom: 10px;
}
section.school-finder li .school-block .schools ul.school-list li div.location span.address {
  display: block;
  font-size: .9em;
  cursor: pointer;
}
section.school-finder li .school-block .schools ul.school-list li div.location span.address:hover {
  opacity: .8;
}
section.school-finder li .school-block .schools ul.school-list li div.learn-more {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10%;
  float: right;
  color: #fff;
}
section.school-finder li .school-block .schools ul.school-list li div.learn-more a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid #fff;
  border-radius: 4px;
}
section.school-finder li .school-block .schools ul.school-list.fade {
  opacity: 1;
  top: 0;
  transition: all 400ms ease-out;
}
section.school-finder .closeSchool {
  cursor: pointer;
  display: inline-block;
  color: #ecf0f1;
  font-size: 1em;
  float: right;
  margin-right: 14px;
  margin-bottom: 20px;
  position: relative;
  top: 15px;
  opacity: 0;
  transition: top .8s ease,opacity 1s ease;
}
section.school-finder .closeSchool .icon-arrow-left {
  font-size: 1.4em;
  vertical-align: sub;
}
section.school-finder .closeSchool.fade {
  opacity: 1;
  top: 0;
}
section.school-finder .map {
  display: inline-block;
  position: absolute;
  right: -100%;
  top: 0;
  height: 100%;
  overflow: hidden;
  transition: all 400ms ease-out;
  z-index: 101;
  width: 100%;
  cursor: pointer;
}
section.school-finder .map img {
  float: right;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.42);
}
section.school-finder .map.slide {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="school-finder">
  <div class="container">
    <div class="closeSchool"><span class="icon-arrow-left"></span>Back to All Blocks</div>
    <div class="school-container">
      <ul>

        <li>
          <div class="school-block">
            <div class="state">
              <div class="img"><img src="" alt="" /></div>
              <span>Test1</span>
            </div>
            <div class="schools">
              <ul class="school-list">

                <li>
                  <div class="location">
                    <span class="city">
                    </span>
                  </div>
                  
                </li>


              </ul>
            </div>
          </div>
        </li>

        <li>
          <div class="school-block">
            <div class="state">
              <div class="img"><img src="" alt="" /></div>
              <span>Test2</span>
            </div>
            <div class="schools">
              <ul class="school-list">

                <li>
                  <div class="location">
                    <span class="city">
                    </span>
                  </div>
                  
                </li>


              </ul>
            </div>
          </div>
        </li>

        <li>
          <div class="school-block">
            <div class="state">
              <div class="img"><img src="" alt="" /></div>
              <span>Test3</span>
            </div>
            <div class="schools">
              <ul class="school-list">

                <li>
                  <div class="location">
                    <span class="city">
                    </span>
                  </div>
                  
                </li>


              </ul>
            </div>
          </div>
        </li>

        <li>
          <div class="school-block">
            <div class="state">
              <div class="img"><img src="" alt="" /></div>
              <span>Test4</span>
            </div>
            <div class="schools">
              <ul class="school-list">

                <li>
                  <div class="location">
                    <span class="city">
                    </span>
                  </div>
                  
                </li>


              </ul>
            </div>
          </div>
        </li>

        <li>
          <div class="school-block">
            <div class="state">
              <div class="img"><img src="" alt="" /></div>
              <span>Test5</span>
            </div>
            <div class="schools">
              <ul class="school-list">

                <li>
                  <div class="location">
                    <span class="city">
                    </span>
                  </div>
                  
                </li>


              </ul>
            </div>
          </div>
        </li>

        <li>
          <div class="school-block">
            <div class="state">
              <div class="img"><img src="" alt="" /></div>
              <span>Test6</span>
            </div>
            <div class="schools">
              <ul class="school-list">

                <li>
                  <div class="location">
                    <span class="city">
                    </span>
                  </div>
                  
                </li>


              </ul>
            </div>
          </div>
        </li>

        <li>
          <div class="school-block">
            <div class="state">
              <div class="img"><img src="" alt="" /></div>
              <span>Test7</span>
            </div>
            <div class="schools">
              <ul class="school-list">

                <li>
                  <div class="location">
                    <span class="city">
                    </span>
                  </div>
                  
                </li>


              </ul>
            </div>
          </div>
        </li>

      </ul>
      <div class="map">
        <img src="/_assets/img/maps/map1.jpg" alt="" />
      </div>

    </div>
    <!-- </> SCHOOL CONTAINER -->
  </div>
</section>

Answer 1

我认为您的问题是由一些CSS规则引起的：

section.school-finder li .school-block {
    position: absolute;
    top: 0;
    ...
}

你需要在你的6＆amp;区块上为“top”指定一个不同的值。 7（例如顶部：例如210px），因为现在正好显示在块1和1之上。 7。

但这会迫使你对JS部分进行更改，将块重置为该特定块的初始位置和大小（6＆amp; 7）。

如果添加更多块，我将变得更难管理（任何5个块的组都需要不同的“顶部”值）。