javascript - 操作后将元素设置为其原始状态

Question

单击“显示说明”链接后Here它会滑出描述。但是，当您单击“隐藏描述”时，它应该重置为原始状态，但现在不会这样做。

我的 Jquery:

$(document).ready(function(){
$('.show_hide').click(function(){
    $(".show_hide").text("Hide Description");
    $(this).prev().prev().prev('.slidingDiv').slideToggle();
    $(this).prev().prev('.desc_preview').fadeOut();
    $("#fade_layer").fadeOut();
    return false
});
}); 

有什么办法可以做到这一点吗？提前致谢

Answer 1

尝试这样的事情:

$('.show-hide').click(function() {
  $(this).siblings('.description').slideToggle();
  $(this).fadeOut(function() {
    ($(this).html() == 'Show description') ? $(this).html('Hide description'): $(this).html('Show description');
  });
  $(this).fadeIn();
});

.group {
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}
.description {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <div class="description">
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing!
  </div>
  <button class="show-hide">Show description</button>
</div>
<div class="group">
  <div class="description">
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing!
  </div>
  <button class="show-hide">Show description</button>
</div>
<div class="group">
  <div class="description">
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing!
  </div>
  <button class="show-hide">Show description</button>
</div>
<div class="group">
  <div class="description">
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing!
  </div>
  <button class="show-hide">Show description</button>
</div>
<div class="group">
  <div class="description">
    This is a description! Learn all about things inside this paragraph. 'Cause that's what descriptions are for - learning about a person, place or thing!
  </div>
  <button class="show-hide">Show description</button>
</div>