平滑地展开侧边菜单

Expand sidemenu smoothly

本文关键字：菜单 平滑      更新时间：2023-09-26

我正在尝试使在小屏幕上折叠的侧菜单平滑扩展。然而，到目前为止，我尝试过的任何方法(例如slideToggle、animate或toggleClass duration(似乎都没有导致无论我多么努力都很难解决的问题。

也许我没有以最好的方式实现它们，所以如果你认为我确实应该使用我上面提到的解决方案之一，请告诉我我应该如何做到这一点，而不会像我一样削弱其余的代码。

任何帮助将不胜感激。提前谢谢你

.HTML 

<button type="button" class="navbar-toggle health" id="sidebutton">
            <span class="sr-only">Toggle navigation</span>
            <span class="fa-alpha"></span>       
          </button>
<div class="col-md-2" role="navigation">
    <ul class="nav sidemenu">
      <li><a href="/path/to.html">1</a></li>  
      <li><a href="/path/to.html">2</a></li> 
      <li><a href="/path/to.html">3</a></li> 
      <li><a href="/path/to.html">4</a></li>
      <li><a href="/path/to.html">5</a></li> 
    </ul>
</div> <!-- col -->

.JS

var scrollTo;
var prevScrolPos;
$('#sidebutton').click(function () {
    if (!$('.sidemenu').hasClass("current")) {
        // if the menu is hidden, save the current scroll position and scroll to top
        prevScrolPos = $(window).scrollTop();
        scrollTo = 0;
    } else {
        // if the menu is not hidden, scroll to the saved position
        scrollTo = prevScrolPos;
    }
    $('.nodisplay').toggleClass("hidden");
    $('.sidemenu').toggleClass('current');
    $('html,body').scrollTop(scrollTo);
});

我创建了一个演示，尽管它似乎不适用于 Firefox：引导

由于您的 html 中有类col-md-2，所以我假设您使用的是 bootsrap。看看这个演示以获得完美的解决方案：

使用引导程序的侧菜单

刚刚通过将以下规则添加到 .sidemenu 来解决它：

height: 0;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
overflow: hidden;

并将高度值设置为 .sidemenu.current。

我还必须更改组 .nodiplay 在脚本中获取的类的名称，以便添加声明显示：无。如果它像我更改名称之前一样使用声明高度：0，则可以看到开头的微小部分。

以防万一有人发现它有用。

正如我对安东所说，他的回答与我问题的最终解决方案具有相同的基础，它使我有一段时间可以清楚地思考:)。

谢谢你的时间。

相关文章：