Question

我是JQuery的新手，所以请耐心等待我=）

我有一个“菜单”按钮，可以“滑下”菜单。

我的问题是菜单从一开始就可见，我希望它首先被隐藏，然后当点击“菜单”按钮时，菜单“向下滑动”，然后在按下后再次“向上滑动”再次显示“菜单”按钮。

我的HTML：

<div id="moduleMenuBtn" class="moduleMenuBtn">Menu</div>
<div id="effect">Some Content</div>

我的JS代码：

<script type="text/javascript">

    $(function() {
        function runEffect(){ 
            var selectedEffect = $('#slide').val();
            var options = {};
            if(selectedEffect == 'scale'){  options = {percent: 0}; }
            else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
            $("#effect").toggle(selectedEffect,options,500);
        };

        $("#moduleMenuBtn").click(function() {
            runEffect();
            return false;
        });
    });
</script>

Answer 1

您最初可以添加一些CSS来隐藏它，如下所示：

#effect { display: none; }

或者内联，像这样：

<div id="effect" style="display: none;">Some Content</div>

Answer 2

只需在css中的#slide元素上使用display:none;或visibility:hidden;即可。或者将$('#slide').hide();放在javascript的开头。

此外，如果您想要向上/向下滑动，jQuery还具有原生函数slideUp()，slideDown()和slideToggle()。请参阅jQuery documentation。

JQuery切换按钮

2 个答案: