在同一按钮上显示隐藏元素

Question

我有以下示例代码 ：

代码HTML：

<ul>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item"> item 1 </li>
  <li class="item hidden"> item 1 </li>
  <li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>

代码CSS：

.hidden {
  display: none;
}
.visible {
  display: block;
}

代码JS：

$('.button').on('click', function (e) {
  var item = $('.item');
  item.removeClass('hidden'); 
});

我想类添加.visible对以前具有的元素.hidden类。 基本上，我想在下次单击时再次隐藏项目，并切换类。

如何隐藏最后两个项目？

提前致谢！

Answer 1

您需要使用.toggle()

 $('.button').on('click', function (e) {
      $('.hidden').toggle('visible'); 
});

Answer 2

试试这个，不需要css，只需.toggle（）就能做到。

 $('.button').on('click', function (e) { $('.hidden').toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item hidden"> item 1 </li> <li class="item hidden"> item 1 </li> </ul> <button class="button">Show/Hide element</button> 

Answer 3

另外，您也可以使用以下方法：

CSS

.hidden {
 display:none;
}

JQuery的

$('.button').on('click', function (e) {
      $('#anyElement').toggleClass('hidden');
});

Answer 4

您需要使用switchClass删除现有的并添加第二个。

Answer 5

或者，您可以单击按钮并遍历每个元素，然后删除/添加相关的类。

 $("button").click(function(){ $("li").each(function(){ let $this = $(this); if($this.hasClass('hidden')){ $this.removeClass("hidden").addClass("visible"); } else if($this.hasClass('visible')){ $this.removeClass("visible").addClass("hidden"); } }) }) 

 .hidden { display: none; } .visible { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item hidden"> item 1 </li> <li class="item hidden"> item 1 </li> </ul> <button class="button">Show/Hide element</button>