Question

有一个很棒的plugin允许人们从侧面滑入菜单并将身体推开。我喜欢从底部滑动面板（切换底部菜单）的选项，但我想要两个更改：

新显示的面板必须保持原位，直到再次点击相同的按钮（用于切换它），使其滑落。
新面板在滑入时必须将其他元素从底部缩小到顶部（我想自己选择元素）。我不想推动身体...只是缩小任意元素。

标记的一个例子是：

<div class="container">
    <div class="row>
        <div class="col-lg-12">
                <a href="sliding-panel">Toggle Sliding panel!</a>
        </div>
        <div class="col-lg-12">
            <div id="myMap"></div>
            <div id="sliding-panel"></div>
        </div>
    </div>
</div>

单击链接/ href将导致滑动面板垂直增长，而地图将缩小到最小高度（约300px）。

有没有插件可以做到这一点？如果没有，我该怎么做？很高兴使用JQuery或仅CSS选项。

Answer 1

对于您的第一个问题：新显示的面板必须保持原位，直到再次单击相同的按钮（用于切换它），使其滑开。如果您查看jPushMenu＆＃39; s source code，可以选择执行此操作 - closeOnClickOutside。初始化jPushMenu时，您可以将closeOnClickOutside定义为false（默认情况下为true）。

对于你的第二个问题：新面板必须在滑入时从下到上收缩其他元素（我想自己选择元素）。我不想推动身体...只是缩小任意元素。只能使用jPushMenu并实现你想要的东西。没有库可以做到这一点，因为必须手动处理几个逻辑：

您想要什么样的缩小动画。
应缩小哪些元素。

但是，您可以收听切换菜单的click事件，并让收缩自行完成。

总之，可以使用以下代码段实现这两个问题中的功能：

  jQuery(document).ready(function($) {
    $('.toggle-menu').jPushMenu({
      closeOnClickOutside: false
    });

    $('.toggle-menu').on('click', function() {
      if($(this).hasClass('menu-active')) {
        // menu slides in, need to shrink some elements.
      } else {
        // menu slides out, need to put these elements back.
      }
    });
  });

如何在缩小另一个div的同时增加一个div增加高度？

1 个答案: