如何使用按钮单击来切换 div 的可见性

Posted 2023-02-24

【中文标题】如何使用按钮单击来切换 div 的可见性

【英文标题】：How to Toggle a div's visibility by using a button click

【发布时间】：2013-10-05 03:11:20

【问题描述】：

下面是我的 javascript 代码，当我点击 button 时，它会显示 div。

再次点击时如何隐藏它？然后点击它，div 应该再次可见？

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) 
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function ()  div.style.display = 'none'; ;

</script>

【问题讨论】：

给我一点时间，我给你做个演示。

使用jquery可以使用toggle，很简单

感谢杰克考虑这个问题，慢慢来，请给我一个答案...再次感谢。

每个 div 都有一个按钮吗？

@user2827600，您的html 将有助于了解您想要的方式，否则我可以想到this。

【参考方案1】：

要在block 和none 之间切换显示样式，您可以执行以下操作：

function toggleDiv(id) 
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";

工作演示：http://jsfiddle.net/BQUyT/2/

【讨论】：

如果显示样式最初没有添加到 DIV 怎么办？？

那么 div.style.display == "none" 将为 false 并且样式将设置为 "none"

对于关注者，这意味着“如果最初没有 div.style.display 仍然有效”

也适用于 inline-block div.style.display = div.style.display == "none" ? "inline-block" : "none";

注意：如果用户加载页面时 div 已经隐藏，这将不会在第一次点击时起作用。为了解决这个问题，请将div.style.display == "none" ? "block" : "none"; 更改为div.style.display == "block" ? "none" : "block";

【参考方案2】：

如果您对 jQuery 解决方案感兴趣：

这是 HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

这是 jQuery 脚本

$( "#button" ).click(function() 
    $( "#item" ).toggle();
);

你可以在这里看到它的工作原理：

http://jsfiddle.net/BQUyT/

如果你不知道如何使用 jQuery，你必须使用这一行来加载库：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

然后用这一行开始：

<script>
$(function() 
    // code to fire once the library finishes downloading.
);
</script>

所以对于这种情况，最终的代码是这样的：

<script>
$(function() 
    $( "#button" ).click(function() 
        $( "#item" ).toggle();
    );
);
</script>

如果你还需要什么，请告诉我

您可以在此处阅读有关 jQuery 的更多信息：http://jquery.com/

【讨论】：

OP 没有标记 jQuery... 那为什么是 jQuery 呢？

是的，但 OP 也提到他是 javascript 编程的新手，所以也许他甚至不知道 jQuery，这就是为什么我也用 jQuery 安装扩展了我的答案。

OP 在他的评论中提到了yes, i can use toggle using jquery but i am not allowed to use jquery, Mr. FaceOfJock。

@MarkHall，真的吗？到目前为止，我认为这是一个简短的形式 Opposite，但今天学到了，谢谢。

@SheikhHeera meta.stackexchange.com/questions/40353/…

【参考方案3】：

如果你想使用 jQuery，它会是最简单的方法，但这应该可以。

function showHide()
    var e = document.getElementById('e');

    if ( e.style.display !== 'none' ) 
        e.style.display = 'none';
     else 
        e.style.display = '';
    

【讨论】：

如果显示样式最初没有添加到 DIV 怎么办？？

显示应该自动被阻止，特别是如果你使用 css 重置，我强烈推荐。

不，伙计，我已经尝试过你的代码，但它没有按预期工作

你是对的，我确定我在某处使用过这段代码。给我一分钟，除非你已经有了答案。

好的，一个纯 js，现在我的答案中没有 jQuery 工作解决方案。链接：lucienconsulting.com/dev

【参考方案4】：

试试下面的逻辑：

<script type="text/javascript">
function showHideDiv(id) 
    var e = document.getElementById(id);
    if(e.style.display == null || e.style.display == "none") 
        e.style.display = "block";
     else 
        e.style.display = "none";
    

</script>

【讨论】：

实际上我并不清楚问题......但现在来自 cmets。

您最近的编辑导致您的脚本中断，仅供参考。如果是null，它将已经被阻塞，从而破坏你的代码。

【参考方案5】：

您可以使用 jquery toggle 轻松做到这一点。通过此切换或 slideToggle，您还将获得漂亮的动画和效果。

$(function()
  $("#details_content").css("display","none");
  $(".myButton").click(function()
    $("#details_content").slideToggle(1000);
  )  
)

<div class="main">
    <h2 class="myButton" style="cursor:pointer">Click Me</h2>
    <div id="details_content">
        <h1> Lorem Ipsum is simply dummy text</h1> 
        <p>    of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</div>

【参考方案6】：

使用 JQuery .toggle() 你可以轻松完成它

$( ".target" ).toggle();

【讨论】：

我看不到 jQuery 标签...你呢？

【参考方案7】：

Bootstrap 4 为此提供了Collapse component。它在幕后使用 JavaScript，但您不必自己编写任何 JavaScript。

此功能适用于<button> 和<a>。

如果使用<button>，则必须设置data-toggle 和data-target 属性：

<button type="button" data-toggle="collapse" data-target="#collapseExample">
  Toggle
</button>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>

如果使用<a>，则必须使用set href 和data-toggle：

<a data-toggle="collapse" href="#collapseExample">
  Toggle
</a>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>