Question

我一直在网上搜索，但到目前为止找不到好的解决方案。在我的HTML页面上，我的固定 #header 部分中有一个＃menu-button ，此标题下面有一个＃menu-panel 部门。菜单面板通过单击按钮图像进行切换 - 折叠。下面的代码效果很好，但默认情况下可以看到动画＃menu-panel 。

有没有人知道默认情况下如何使分割高度为0，但是在单击按钮时仍然会切换动画高度？代码如下：

<body>

<div id="header">
  <img src="image" id="menu-button">
</div>

<div id="menu-panel">
  <ul>
    <li>some buttons listed here</li>
    <li>some buttons listed here</li>
    <li>some buttons listed here</li>
  </ul>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script>
// header menu
  $(document).ready(function(){
  $("#menu-button").click(function(){
  $("#menu-panel").animate({
  height: 'toggle'
  });
  });
  });
</script>

</body>

提前谢谢！

Elmigo

Answer 1

＆＃34;下面的代码效果很好，但默认情况下动画＃menu-panel是可见的。＆＃34;

更改此内容：<div id="menu-panel"> 在<div id="menu-panel" style="display:none">

在图像上单击切换动画分割高度（默认隐藏？）

1 个答案: