Question

简介

我使用了Semantic-UI的侧边栏功能，它为您提供了一个按钮，可以触发从左侧推送内容的侧边栏（在本例中）。

我希望通过鼠标悬停在左侧展开相同的侧边栏。我意识到有几种方法可以做到这一点（正如这些经常做的那样。也许只是检查鼠标的X位置会起作用但是除了这一点之外）;我选择在左侧创建一个透明div并使其:hover伪类触发侧边栏：

// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
// hover transparent div to trigger the sidebar too:
$('.sidebar-trigger').hover(function() {
    $('.ui.sidebar').sidebar('show')
});
// hide() and show() the sidebar accordingly to use the sidebar:
$('.ui.sidebar').sidebar('setting', {
    onShow: function() {
        $('.sidebar-trigger').hide();
    },
    onHidden: function() {
        $('.sidebar-trigger').show();
    }
});

问题

现在，除了一次之外，一切都有效：当侧边栏打开时你不要停止移动鼠标。我查看了$(document).on('transitionend', function(event) { ... }，该鼠标有效地阻止了转换完成。

资源

我在.sidebar-trigger上添加了蓝色背景并制作了一个小视频/ gif，以便更清晰。

我像一个疯狂的生物一样移动了鼠标，但是用自然的手势也会出现问题。

我在这件事情上使用Semantic-UI指南：http://semantic-ui.com/modules/sidebar.html#/settings（我还试过onVisible和onHide，没有运气）

这是运行 Chrome 45.0.2454.101（64位）的 OSX Yosemite 10.10.3

jsfiddle with the problem at hand

PS：似乎it might be an OSX Chrome bug?

Answer 1

我会尝试使用one和mouseover：

$('.sidebar-trigger').one('mouseover', function() {
    $('.ui.sidebar').sidebar('show')
});

然后，当它完成动画后，重新附加事件：

 $(document).on('transitionend', function(event) { 
     $('.sidebar-trigger').one('mouseover', function() {
        $('.ui.sidebar').sidebar('show')
     });
 });

我认为正在发生的事情是多次调用悬停事件 - 每次元素悬停，然后遍历子元素，然后返回悬停元素，并且事情在某些方面变得混乱。因此，如果show尚未显示，则只需拨打{{1}}。

Answer 2

以下是一个工作示例：Fiddle

我相信当元素悬停时，它会添加一个“揭开”和“可见”类，另一个叫做“动画”，直到鼠标停止移动才会激活。我将jQuery稍微更改为仅添加类'揭开'和'可见'，它仍然可以动画。然而，身体向右推得太远了175px，所以我不得不编辑导致这一点的类（如下所示）从260px到85px。根据我的理解，这可以使菜单正常运作。

$('.sidebar-trigger').mouseenter(function() {
    $('.ui.sidebar').addClass('uncover, visible');
    $('body').addClass('mleft175');
});

$('body').click(function() {
    $('.ui.sidebar').removeClass('uncover, visible');
    $('body').removeClass('mleft175');
});

然后添加重写类

.ui.visible.left.sidebar ~ .pusher 
{
-webkit-transform: translate3d(85px, 0, 0);
    transform: translate3d(85px, 0, 0);
}

现在设置为在单击正文时隐藏菜单。或者，当鼠标离开侧边栏菜单时，您可以隐藏它：

$('.ui.sidebar').mouseleave(function(){
    $(this).removeClass('uncover, visible')
});

Answer 3

好的，我的第一个答案是（当然）对于它真正需要的东西来说太多了。 onVisible似乎完美无缺。那不适合你吗？演示HERE

只需在侧边栏设置中将'onShow'更改为'onVisible'：

    $('.ui.sidebar').sidebar('setting', {
        onVisible: function() {
            $('.sidebar-trigger').hide();
        },
        onHidden: function() {
            $('.sidebar-trigger').show();
        }
    });

如Semantic UI site所示，动画开始时onVisible会触发。当动画完成时，onShow会触发。所以你正在做的是在动画最终完成时隐藏那个蓝色/透明条（我之前的答案中提到的.animating类），而不是它开始时。如果您需要进一步说明，请告诉我。

鼠标移动块＆＃39; transitionend＆＃39;

简介

问题

资源

3 个答案: