JQuery 的 ToggleShow 的最佳方式是什么？

Question

如何通過 JQuery 顯示或隱藏元素，如下例所示：

 function toggleShow(itemId){ ... }

 #toggle-item{ diplay:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="toggle-item">ToggleShow Item</div> <button onclick="toggleShow('toggle-item')">ToggleShow</button>

我回答了我的問題......但是有沒有比我的答案更好或更完整的答案？ 我希望 JQuery 沒有更好的方法......

Answer 1

我們可以使用切換方法。 它在 hide() 和 show() 之間為所選元素工作。

 function toggleShow(itemId){ $("#" +itemId).toggle(); }

 #toggle-item{ diplay:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="toggle-item">ToggleShow Item</div> <button onclick="toggleShow('toggle-item')">ToggleShow</button>

Answer 2

我們可以通過下面的代碼來做到：

 function toggleShow(itemId){ if($(`#${itemId}`).css("display")!='none') $(`#${itemId}`).hide(); else { $(`#${itemId}`).show(); } }

 #toggle-item{ diplay:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="toggle-item">ToggleShow Item</div> <button onclick="toggleShow('toggle-item')">ToggleShow</button>