Question

我在这些论坛上找到了一个很棒的解决方案 How to create sliding DIV on click? 然而，我想要的是只需单击按钮就可以显示和消失内容。以下是我的代码：

<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>

现在上面的代码按预期用于点击。我未能实现的是默认情况下将其可见性设置为无，当我单击按钮时，首先将其可见性更改为可见，然后动画发生，并且在动画完成后第二次单击时它也会消失。可以有人指导吗？感谢

Answer 1

在你的滑块功能（）中你有：

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

您所要做的就是查看能见度是否可见

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

<强> DEMO

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

基于CSS的div上下滑动 - 无法出现或消失并起作用

1 个答案: