0
我有一段代碼顯示框，一旦你點擊一個框，它展開並顯示更多的信息，然後你可以關閉再次查看框。由於某種原因，即使我已經放置了7個列表項目，但並不是所有這些項目都顯示出來，它們也不會以我將它們放入html的順序顯示。JS擴展並顯示塊不顯示所有塊
我跟着一個教程非常緊密，但我找不到導致它只顯示這個隨機順序中的幾個框的代碼部分。
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>