Question

当点击菜单按钮时，我正在尝试将下拉菜单div的高度设置为0到250px。我尝试使用jQuery。

这包含在我的HTML中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="scripts.js"></script>

菜单按钮是一个范围：

<span id="menu_btn" name="menu_button">MENU</span>

这是下拉菜单：

<div id="menu_dropdown">
    <ul>
        <li><a id="on" href="#">HOME</a></li>
        <!-- more buttons -->
</div>

这是jQuery：

$("#menu_btn").toggle(function(){
    $("#menu_dropdown").animate({'height': '250px'}, 100);
}, function(){
    $("#menu_dropdown").animate({'height': '0px'}, 100);
});

然而它不起作用。这是为什么？

Answer 1

我认为这就是你想要的：

$("#menu_btn").on('click', function() {
    $("#menu_dropdown").slideToggle(100);
});

更改高度可能不起作用，因为它不会阻止显示内容。 slideToggle()更改display属性，该属性将起作用。

另见http://api.jquery.com/slideToggle/

Answer 2

Span不是按钮或锚标记。此外，您需要首先捕获单击事件才能使用切换。

http://jsfiddle.net/3w2tt1wm/

Take alook

Answer 3

尝试在动画调用中使用匿名函数，如下所示。然后你可以显式获取你想要改变高度的元素，并使用jquery的.height（HEIGHT）或.css（“height”，HEIGHT）;

$("#menu_btn").toggle(function(){
    $("#menu_dropdown").animate(function(){$("#menu_dropdown").css("height", "250px");}, 100);
}, function(){
    $("#menu_dropdown").animate(function(){$("#menu_dropdown").css("height", "0px");}, 100);
});

此外，您没有显示它，所以只需确保切换位于单击或鼠标悬停处理程序功能中。否则对你没有任何好处。

单击按钮时动画div的高度

3 个答案: