Question

当我鼠标移出时，我试图让菜单div滑动200px。

我有以下HTML结构：

<nav id="menuLeft">
    <div id="menuLeft-toggle">
    </div>
    <div class="panel">
        accordion menu in here
    </div>
    <div class="panel">
        accordion menu in here
    </div>

    <div class="panel">
        accordion menu in here
    </div>
</nav>

我有一个切换div和几个菜单面板（它用于电子教学）。

布局如下：

导航div位于屏幕左侧，宽度为200px 100％高
menuLeft-toggle div在右侧运行 menuLeft nav div
面板在menuLeft div

我已经使用JS（hasClass和removeClass）在单击menuLeft-toggle div时手动切换导航div打开和关闭但是需要将鼠标输出的导航div自动隐藏（滑动）到左侧200px所以我们不会隐藏切换div。

如何完成div滑动（即.hide（400））仅200px并且仍然可以在单击menuLeft-toggle div时打开？

感谢您的帮助。

Answer 1

不确定这是否是你想要的，但是使用:hover伪类可以用来触发隐藏菜单。

菜单默认为“隐藏” - （在屏幕外）。应用:hover类将元素的left属性清零。

https://jsfiddle.net/fhfe1gey/

Answer 2

首先，你要给它一个CSS转换，比如说，2秒。这意味着它需要2秒才能滑动，所以看起来它只是贴在一边。显然，您可以将其更改为您喜欢的内容，如果您不想要它，则不需要它。

div

在鼠标离开时让function moveMenuToLeft(){ document.getElementById('menuLeft').style.left = '-200px'; //change 'left' to 'marginLeft' if it isnt fixed on the screen } document.getElementById('menuLeft').onmouseleave = moveMenuToLeft;向左移动200px：

div

单击按钮时，再次将function moveMenuBack(){ document.getElementById('menuLeft').style.left = '0'; //change 'left' to 'marginLeft' if needed } document.getElementById('menuLeft-toggle').onclick = moveMenuBack;移回原位：

div

由于{{1}}宽度为400px，但您需要200px才能保持可见，因此将其向左移动仅200px可保持正确的200px。

当mouseleave时，＃div向左滑动div

2 个答案: