javascript - 单击位于隐藏和显示的 div 之外的标签后，如何隐藏/显示标签 a

Question

我有一些具有以下结构的 html 代码。当我单击带有“moreCases”类的标签 a 时，带有“container-cases”类的 div 变为显示，当我单击带有“container-cases”类的“lessCases”div 时变为隐藏但带有“moreCases”的标签 a 做不成秀了，我怎么解决？

HTML:

<a href="#!" class="moreCases show">more 1</a>
<div class="container-cases hide">
   <input type="text" />                 
   <a href="#!" class="lessCases">less 1</a>
</div>

JavaScript:

$(document).ready(function () {
      $(".moreCases").each(function () {
          var more = $(this);
          more.click(function () {
              more.next().removeClass('hide').addClass('show');
              more.removeClass('show').addClass('hide');
          });
      });
      $(".lessCases").each(function () {
          var less = $(this);
          less.click(function () {
              less.parent().removeClass('show').addClass('hide');            
              less.prev(".moreCases").removeClass('hide').addClass('show');                                     
          });
      });
});

Answer 1

在使用 prev() 之前，您必须定位到 parent():

less.parent().prev(".moreCases").removeClass('hide').addClass('show');

$(document).ready(function () {
  $(".moreCases").each(function () {
      var more = $(this);
      more.click(function () {
          more.next().removeClass('hide').addClass('show');
          more.removeClass('show').addClass('hide');
      });
  });
  $(".lessCases").each(function () {
      var less = $(this);
      less.click(function () {
          less.parent().removeClass('show').addClass('hide'); 
          less.parent().prev(".moreCases").removeClass('hide').addClass('show');                                    
      });
  });
});

.hide{
  display: none;
}
.show{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#!" class="moreCases show">more 1</a>
<div class="container-cases hide">
  <input type="text" />                 
  <a href="#!" class="lessCases">less 1</a>
</div>