Question

首先，这是我正在研究的主题，如果有帮助的话。（x）

我正试图让侧边栏折叠起来。好吧，凭借我用这个jQuery获得的东西，它确实崩溃了。这是箭头按钮让我感到难过。

这是我的代码;它只影响左侧边栏，我想我可以复制它并更改正确的一些类和ID。

$(document).ready(function(){
    $('#leftside').mouseenter(function(){
        $('#leftbutton.contained').fadeIn() 
    });
    if($('#leftside').is(':visible')) {
        $('#leftside').mouseleave(function(){
            $('#leftbutton.contained').delay(800).fadeOut() 
        });
    }
    $('#leftbutton').click(function(){
        $('#leftside').toggle("slide");
        $('#leftbutton').toggleClass("contained");
    }); 
});

我希望按钮在正确的侧边栏悬停时显示，并在您离开时消失。这很好，谢天谢地！但是，一旦侧边栏在折叠时消失，按钮也会消失。

顺便说一句，“包含”类只显示无。我的理论是，如果我将该类附加到按钮并切换它，那么按钮将在侧边栏移动后保持可见。不幸的是，事实并非如此。

我做错了什么？

（另外，在地平线上：在侧边栏滑入后，我希望箭头在可见的情况下从主区域滑出并挂出“.house”div的边缘，以防查看器我希望侧边栏能够恢复原状。我只想知道如何实现这一目标，那就是从左右属性中改变动画。一旦侧边栏切换回来，当鼠标离开并进入时，它会重新隐藏并显露出来，如果你对这个不可避免的问题有任何提示或答案，我也会很感激！）

编辑：向我建议的代码仍然无效！我试图做另一个条件，但仍然无效。这太荒谬了。

$(document).ready(function(){
    if ($('#leftside').is(:visible)) {
    $('#leftside').mouseenter(function(){
        $('#leftbutton.contained').fadeIn() 
    });
    $('#leftside').mouseleave(function(){
        $('#leftbutton.contained').delay(800).fadeOut() 
    });
    } else { $('#leftbutton').css("display:block") }

我知道这对于一个经验丰富的编码员来说可能是显而易见的，但我很难过，有点沮丧。

Answer 1

JQuery没有像嵌入式系统那样做一些逻辑。您的if($('#leftside').is(':visible')) {仅在加载文档时执行一次。然后，不考虑之后发生的任何事情。

我想我明白了你的意图。我认为不是让侧边栏完全消失，而是将其缩小到1-2像素，这样当用户将鼠标移动到屏幕边缘时，您可以触发onhover事件以显示所需的箭头。

var expanded = true

$('#leftside').hover(function(){ 
    //MouseEnter
    $('#leftbutton.contained').fadeIn()
}, function(){
    //Mouse leaves
    $('#leftbutton.contained').delay(800).fadeOut() 
}

$('#leftbutton').click(function(){
    if (expanded){
        $('#leftside').css("width", 2)
        // Reposition #leftButton where you want when the left menu is NOT visible
    } else{
        $('#leftside').css("width", DEFAULT_VALUE)
        // Reposition #leftButton when the left menu IS visible
    }
    $('#leftbutton').toggleClass("contained");
    expanded = !expanded
});

滑动侧边栏，消失按钮，条件语句

1 个答案: