Question

我有一些具有以下结构的html代码。当我单击带有“ moreCases”类的标签a时，将显示类“ container-cases”的div，而当我单击带有“ container-cases”类的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

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

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>

Answer 2

删除最后一个.addClass('hide')

 $(".moreCases").each(function () {
        var more = $(this);
        more.click(function () {
            more.next().removeClass('hide').addClass('show');
            more.removeClass('show');
        });
    });

Working example

Answer 3

无需遍历.moreCases和.lessCases，而只需向其添加click事件即可。此外，由于点击是在a标记上，因此可以通过添加e.preventDefault

来防止默认行为

$(document).ready(function() {
  $(".moreCases").click(function(e) {

    $(this).next().removeClass('hide').addClass('show');
    $(this).removeClass('show').addClass('hide');
  });

  $(".lessCases").click(function(e) {
    e.preventDefault();
    $(this).parent().removeClass('show').addClass('hide');
    $(this).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>

单击后在div之外被隐藏并显示的标签后如何隐藏/显示标签a

3 个答案: