javascript - 同时加载元素

Question

我有两个元素:block with list 和 rectangle 作为“after”元素，我希望它们同时加载，但我不知道该怎么做。我试图让速度变慢，但没有用。我不能让矩形成为隐藏元素的一部分，因为矩形会出现在同一个地方，但不会出现在被点击的元素下面。有人能帮助我吗？

$(document).on('click', ".repair_item", function() {
  var height = parseInt($(this).find(".repair_item_hiddenList").css('height'));
  var $list = $(this).find(".repair_item_hiddenList");
  var $others = $('.repair_item_hiddenList');
  $(".repair_item_text_js").hide('repair_item_text_js');
  var cssValues = {
    "margin-left": "15px"
  }
  $('.repair_item').css('margin-bottom', '30px');
  $others.hide();
  $list.css(cssValues);
  $list.slideDown('slow');
  $(this).find(".repair_item_text_js").slideDown('slow');
});

.flex {
  display: flex;
}

.repair_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.repair_item {
  width: 300px;
  height: 140px;
  margin-bottom: 30px;
}

.repair_item:hover {
  cursor: pointer;
}

.repair_item_flex {
  height: 100%;
  display: flex;
  align-items: flex-start;
}

.repair_item_text {
  width: 50%;
  height: 100%;
  background-color: #37acfb;
  color: white;
  font-size: 15px;
  font-family: "Roboto Consendered Bold";
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  position: relative;
}

.repair_item_text_text {
  text-align: center;
}

.repair_item_text_js {
  display: none;
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-bottom: 20px solid #212121;
  bottom: -30px;
  left: 50%;
  transform: translate(-20px);
}

.repair_item_hiddenList {
  display: none;
  background-color: #252525;
  color: white;
  padding: 25px 30px 20px;
  left: 0px;
  margin-top: 30px;
  position: absolute;
  cursor: auto;
}

.repair_item_hiddenList_title {
  font-size: 17px;
}

.repair_item_hiddenList_list {
  list-style: none;
  padding-left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.repair_item_hiddenList_list li {
  font-size: 15px;
  display: block;
  width: 300px;
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
  <div class="repair_item">
    <div class="repair_item_flex">
      <div class="repair_item_text">
        <div class="repair_item_text_text">block</div>
        <div class="repair_item_text_js"></div>
      </div>
    </div>
    <div class="repair_item_hiddenList">
      <p class="repair_item_hiddenList_title">title</p>
      <ul class="repair_item_hiddenList_list">
        <li>list element1</li>
        <li>list element2</li>
        <li>list element3</li>
        <li>list element4</li>
      </ul>
    </div>
  </div>
  <div class="repair_item">
    <div class="repair_item_flex">
      <div class="repair_item_text">
        <div class="repair_item_text_text">block</div>
        <div class="repair_item_text_js"></div>
      </div>
    </div>
    <div class="repair_item_hiddenList">
      <p class="repair_item_hiddenList_title">title</p>
      <ul class="repair_item_hiddenList_list">
        <li>list element1</li>
        <li>list element2</li>
        <li>list element3</li>
        <li>list element4</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

你只需要修改这两行:

$(this).find(".repair_item_text_js").slideDown('slow');
$(".repair_item_text_js").hide('repair_item_text_js');

到

$(this).find(".repair_item_text_js").show(1000);
$(".repair_item_text_js").hide(1);

$(document).on('click', ".repair_item", function() {
  var height = parseInt($(this).find(".repair_item_hiddenList").css('height'));
  var $list = $(this).find(".repair_item_hiddenList");
  var $others = $('.repair_item_hiddenList');
  $(".repair_item_text_js").hide(1);
  var cssValues = {
    "margin-left": "15px"
  }
  $('.repair_item').css('margin-bottom', '30px');
  $others.hide();
  $list.css(cssValues);
  $list.slideDown('slow');
  $(this).find(".repair_item_text_js").show(1000);
});

.flex {
  display: flex;
}

.repair_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.repair_item {
  width: 300px;
  height: 140px;
  margin-bottom: 30px;
}

.repair_item:hover {
  cursor: pointer;
}

.repair_item_flex {
  height: 100%;
  display: flex;
  align-items: flex-start;
}

.repair_item_text {
  width: 50%;
  height: 100%;
  background-color: #37acfb;
  color: white;
  font-size: 15px;
  font-family: "Roboto Consendered Bold";
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  position: relative;
}

.repair_item_text_text {
  text-align: center;
}

.repair_item_text_js {
  display: none;
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-bottom: 20px solid #212121;
  bottom: -30px;
  left: 50%;
  transform: translate(-20px);
}

.repair_item_hiddenList {
  display: none;
  background-color: #252525;
  color: white;
  padding: 25px 30px 20px;
  left: 0px;
  margin-top: 30px;
  position: absolute;
  cursor: auto;
}

.repair_item_hiddenList_title {
  font-size: 17px;
}

.repair_item_hiddenList_list {
  list-style: none;
  padding-left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.repair_item_hiddenList_list li {
  font-size: 15px;
  display: block;
  width: 300px;
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
  <div class="repair_item">
    <div class="repair_item_flex">
      <div class="repair_item_text">
        <div class="repair_item_text_text">block</div>
        <div class="repair_item_text_js"></div>
      </div>
    </div>
    <div class="repair_item_hiddenList">
      <p class="repair_item_hiddenList_title">title</p>
      <ul class="repair_item_hiddenList_list">
        <li>list element1</li>
        <li>list element2</li>
        <li>list element3</li>
        <li>list element4</li>
      </ul>
    </div>
  </div>
  <div class="repair_item">
    <div class="repair_item_flex">
      <div class="repair_item_text">
        <div class="repair_item_text_text">block</div>
        <div class="repair_item_text_js"></div>
      </div>
    </div>
    <div class="repair_item_hiddenList">
      <p class="repair_item_hiddenList_title">title</p>
      <ul class="repair_item_hiddenList_list">
        <li>list element1</li>
        <li>list element2</li>
        <li>list element3</li>
        <li>list element4</li>
      </ul>
    </div>
  </div>
</div>