Question

我正试图制作一个在小屏幕上折叠的侧面菜单，顺利扩展。但是，到目前为止我没有尝试过的任何内容（例如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： Bootply

Answer 1

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

side-menu using bootstrap

Answer 2

通过将以下规则添加到 .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 在脚本中获取的类的名称，以便我将声明 display：none 添加到其中。如果它在我更改其名称之前通常使用了声明 height：0 ，则可以看到它开头的小部分。

万一有人发现它有用。

正如我对安东所说，他的答案与我的问题的最终解决方案基本相同，它让我有一段时间思考清楚......：）

感谢您的时间。

顺利展开sidemenu

2 个答案: