Jquery .slideDown () только сверху - PullRequest
Новая
       24

Jquery .slideDown () только сверху

0 голосов
/ 02 сентября 2018

Я пытаюсь сдвинуть div при нажатии на родительский элемент. Я могу получить поведение слайда, однако, он не только скользит сверху, он также расширяется слева, так и из верхнего левого угла. Я только хочу, чтобы это скользило сверху.

Я пробовал с slideDown (), slideToggle () и даже анимировать высоту с помощью animate (), но поведение всегда одинаковое, скользя из верхнего левого угла. Я подозреваю, что это как-то связано с начальной загрузкой, но это только предположение.

Вот мой jquery: 

$('div.card').click(function() {
  $(this).find("div.details-container").toggle(function() {
    $(this).find("div.details-container").slideToggle(2000);
  });
});
tcard-head {
  border-top: 2px solid #f2f2f2;
  padding: 15px 15px 5px 15px;
  background-color: white;
  font-weight: 600;
  color: black;
  z-index: 2;
}

.pio-details {
  margin-top: -2px;
  overflow: hidden;
}

.details-container {
  overflow: hidden;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="card">
  <div class="tcard-head">
    <div class="row">
      <div class="col-xs-7 text-left">
        <div class="avatar"></div>
        <%= user.full_name %>
      </div>
      <div class="col-xs-2">
        <%=  user.qualification %>
      </div>
      <div class="col-xs-3 text-right">
        <%= user.display_status %>
      </div>
    </div>
  </div>
  <div class="row details-container">
    <div class="col-xs-10 col-xs-offset-1 white-bg pio-details">
      <div class="tcard col-xs-12 col-sm-6">Agency: <span><%= user.agency %></span>
      </div>
    </div>
  </div>
</div>

Я пытаюсь сдвинуть .pio-details div. Я завернул его в контейнер .details, думая, что это может помочь. Я не сделал.

Я использую Rails 5 и Bootstrap-SASS 3.3.7. Есть идеи, почему у меня такое поведение? Спасибо.

...