Question

我有以下代码：

<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>

        <div id="elaborate_1" class="expandable-box" style="display:none;">

                <div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
                <p class="nomargin nopadding">HELLO</p>
                </div><!-- .descpription -->

        </div>

网页目前隐藏此消息“hello”，直到我点击“COLLAPSE”，但我希望自动显示内容，直到我点击“崩溃。

我该怎么做？

Answer 1

更改display：none以显示：在elaborate_1 div上阻止。

Answer 2

从包含元素中删除display：none：

<div id="elaborate_1" class="expandable-box">

如果您的ShowHide功能正确，它应该就是这样。如果没有，您应该从函数中发布代码。

Answer 3

只需从您的html元素

中删除style="display:none;"即可

并将以下代码添加到js函数中（供参考）

document.getElementById("elaborate_1").style.display = "block";

我个人建议你看看JQuery。它允许您利用控制各种效果，如显示，隐藏，切换，淡入淡出和自定义动画等。以下链接：http://api.jquery.com/category/effects/可能对您有用。

一个小Jquery示例代码：

$('a.button').click(function(){
    $('#elaborate_1').toggle("slow"); 
});

Javascript显示/隐藏：如何设置为显示

3 个答案: