Javascript 基于CSS的div上下滑动-不能出现或消失并工作_Javascript_Html_Css

Javascript 基于CSS的div上下滑动-不能出现或消失并工作

javascript html css

Javascript 基于CSS的div上下滑动-不能出现或消失并工作,javascript,html,css,Javascript,Html,Css,我在这些论坛上找到了一个很棒的解决方案然而，我想要的是让内容在点击按钮时出现和消失。以下是我的代码： <html> <head> <title>CSS - Slider Test</title> <style type="text/css"> .slide { /*visibility:hidden;*/ b

我在这些论坛上找到了一个很棒的解决方案然而，我想要的是让内容在点击按钮时出现和消失。以下是我的代码：

<html>
    <head>
        <title>CSS - Slider Test</title>
        <style type="text/css">
            .slide {
                /*visibility:hidden;*/
                border: 1px solid black;
                height: 0px;
                width:400px;
                overflow:hidden;
                transition:             height 500ms ease;
                    -moz-transition:    height 500ms ease;
                    -ms-transition:     height 500ms ease;
                    -o-transition:      height 500ms ease;
                    -webkit-transition: height 500ms ease;
            }

        </style>
        <script type="text/javascript">
            function slider(){
                var obj = document.getElementById('slide');//
                 //obj.style.visibility= (obj.style.visibility=='hidden')?'visible':'hidden';
                obj.style.height = ( obj.style.height == '0px' || obj.style.height == '' ) ?  '150px'  :  '0px';
            }
        </script>
    </head>
    <body>

    <input type="button" onclick="slider();" value="Click"/>

    <div id="slide" class="slide">
        <table>

            <tr>
                <th colspan="2" align="center">
                    Formats
                </th>
            </tr>
            <tr>
                <td style="width:140px;"><span id="lblCountry">Culture</span></td>
                <td>
                    <select name="cultureList" id="cultureList">
                        <option selected="selected" value="1033">English (United States)</option>
                        <option value="2057">English (United Kingdom)</option>
                        <option value="3084">French (Canada)</option>
                        <option value="4105">English (Canada)</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="lblNumber">Number</span>
                </td>
                <td>
                    <input name="number" type="text" value="123,456,789.00" id="number" style="width:120px;" />
                </td>
            </tr>
            <tr>
                <td><span id="lblCurrency">Currency</span></td>
                <td>
                    <input name="curr" type="text" value="$123,456,789.00" id="curr" style="width:120px;" />
                </td>
            </tr>


        </table>


    </div>
     <div>
            Some other content
        </div>
    </body>
    </html>


CSS-滑块测试
.幻灯片{
/*可见性：隐藏*/
边框：1px纯黑；
高度：0px；
宽度：400px；
溢出：隐藏；
过渡：高度500ms；
-moz过渡：高度500ms；
-ms过渡：高度500ms；
-o型过渡：高度500ms；
-webkit过渡：高度500毫秒；
}
函数滑块（）{
var obj=document.getElementById（'slide'）//
//obj.style.visibility=（obj.style.visibility='hidden'）？'visible'：'hidden'；
obj.style.height=（obj.style.height='0px'| | obj.style.height=''）-'150px'：'0px'；
}
格式
文化
英语（美国）
英语（联合王国）
法语（加拿大）
英语（加拿大）
数字
通货
其他一些内容

现在，上面的代码按预期在单击时工作。我没有做到的是在默认情况下将其可见性设置为“无”，当我单击按钮时，首先将其可见性更改为“可见”，然后动画发生，第二次单击动画完成后，它也会消失。有人可以指导吗？感谢您在slider函数（）中提供的：

你所要做的就是查看可见性是否可见

obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';

另外，我会改变你的CSS是过渡到所有，而不仅仅是高度。使用户在过渡结束之前不会看到可见性发生变化。

您的问题让我困惑。可见性设置为“无”。元素的顶部只有一个黑色边框。我发布了完整的代码，所以它可以正常工作。但是，如果您取消对css和js的可见性部分的注释，您将看到我想要做的事情以及行为。我想要的是。在页面加载时，只有按钮可见。当用户点击按钮时，滑块就会出现，动画也会出现。当用户再次单击按钮时，动画发生（内容向上滑动），最后可见性再次设置为无…像这样？当然…谢谢…你能发帖子让我点击我的解决方案吗？我无法理解我做得不对的地方是什么-(

obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';