如何使相同的按钮隐藏和显示块？ [复制]

Posted 2023-05-07

【中文标题】如何使相同的按钮隐藏和显示块？ [复制]

【英文标题】：How to make the same button hide and show the block? [duplicate]

【发布时间】：2020-05-11 23:52:39

【问题描述】：

<button class="my_btn btn-success">Hide and Show</button></p>
<h1 id="hol">Hello World</h1>



$(".my_btn").on('click', function(event) 
    $("#hol").hide();
);

如何使相同的按钮隐藏和显示 hol 块？ 请帮助，我是开始开发）

【参考方案1】：

您可以使用 jQuery 的 .toggle() 来显示或隐藏匹配的元素：

$(".my_btn").on('click', function(event) 
    $("#hol").toggle();
    // you can set the specific text for the button as well
    $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="my_btn btn-success">Hide</button></p>
<h1 id="hol">Hello World</h1>

【参考方案2】：

使用toggle在隐藏和显示之间切换