javascript - 独立div js

Question

请告诉我，打开其中一个方 block 时，第二个方 block 会掉下来。如何使这两个 block 彼此独立？ 也就是说，您需要这样做，以便在您打开第一个 div 时，第二个 div 将保留在原位。现在，当打开一个 div 时，第二个会移动。 如何解决？

$(document).ready(function() {
  $('#accordeon .acc-head').on('click', f_acc);
});

function f_acc() {
  //$('#accordeon .ac-body').slideUp(1000);
  $('#accordeon .acc-body').not($(this).next()).slideUp(1000);
  $(this).next().slideToggle(500);
}

#accordeon {
  border: 10px solid #fff;
  width: 30%;
  background: #fff;
  border-radius: 5px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}

.acc-head {
  cursor: pointer;
}

.acc-body {
  margin-bottom: 5px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id='accordeon'>
  <div class='acc-head'>
    <center><span style='font-size: 20px;'>Стол №".$row['stol']."</span></center>
  </div>
  <div class='acc-body'>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;'>
    <div style='width:100%;height:225px;overflow-y: scroll;margin-bottom:5px;'>
      <div style='width:94%; height:65px;margin-left:10px;' id='ck-button'>
        <label><input type='checkbox' value='1'>
	<span>".$row2['name']." (Модификатор)<br>
		Кол-во: ".$row2['amount']."<br>
		Статус: ".$row2['status']."</span><br>
	</label>
      </div>"; } echo "</div>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;margin-bottom:px;'>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id='accordeon'>
  <div class='acc-head'>
    <center><span style='font-size: 20px;'>Стол №".$row['stol']."</span></center>
  </div>
  <div class='acc-body'>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;'>
    <div style='width:100%;height:225px;overflow-y: scroll;margin-bottom:5px;'>
      <div style='width:94%; height:65px;margin-left:10px;' id='ck-button'>
        <label><input type='checkbox' value='1'>
	<span>".$row2['name']." (Модификатор)<br>
		Кол-во: ".$row2['amount']."<br>
		Статус: ".$row2['status']."</span><br>
	</label>
      </div>"; } echo "</div>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;margin-bottom:px;'>
  </div>
</div>

Answer 1

将vertical-align:top添加到#accordeon:

$(document).ready(function() {
  $('#accordeon .acc-head').on('click', f_acc);
});

function f_acc() {
  //$('#accordeon .ac-body').slideUp(1000);
  $('#accordeon .acc-body').not($(this).next()).slideUp(1000);
  $(this).next().slideToggle(500);
}

#accordeon {
  border: 10px solid #fff;
  width: 30%;
  background: #fff;
  border-radius: 5px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  
  vertical-align:top
}

.acc-head {
  cursor: pointer;
}

.acc-body {
  margin-bottom: 5px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id='accordeon'>
  <div class='acc-head'>
    <center><span style='font-size: 20px;'>Стол №".$row['stol']."</span></center>
  </div>
  <div class='acc-body'>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;'>
    <div style='width:100%;height:225px;overflow-y: scroll;margin-bottom:5px;'>
      <div style='width:94%; height:65px;margin-left:10px;' id='ck-button'>
        <label><input type='checkbox' value='1'>
	<span>".$row2['name']." (Модификатор)<br>
		Кол-во: ".$row2['amount']."<br>
		Статус: ".$row2['status']."</span><br>
	</label>
      </div>"; } echo "</div>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;margin-bottom:px;'>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id='accordeon'>
  <div class='acc-head'>
    <center><span style='font-size: 20px;'>Стол №".$row['stol']."</span></center>
  </div>
  <div class='acc-body'>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;'>
    <div style='width:100%;height:225px;overflow-y: scroll;margin-bottom:5px;'>
      <div style='width:94%; height:65px;margin-left:10px;' id='ck-button'>
        <label><input type='checkbox' value='1'>
	<span>".$row2['name']." (Модификатор)<br>
		Кол-во: ".$row2['amount']."<br>
		Статус: ".$row2['status']."</span><br>
	</label>
      </div>"; } echo "</div>
    <hr style='background-color: #e0e0e0; height: 1px;  border: 0px;margin-bottom:px;'>
  </div>
</div>