Question

我有一个简单的div（一个☰菜单），当你将鼠标悬停在它上面时，会出现一个图像div（通过不透明度）。当您单击☰菜单时，将切换另一个div显示，但当您将鼠标从图像/文本div移开时，菜单将消失。有没有办法在切换的div处于活动状态时保持菜单可见，并且一旦切换的div不再处于活动状态，它是否会在悬停时恢复为标准显示/消失？我想，在切换的div处于活动状态的情况下，它会涉及在菜单div中添加一个类，但我仍然是JQuery的初学者，所以如果是的话，我不知道如何做到这一点案件。我希望这一切都有意义，如果我需要澄清，请告诉我。谢谢！

顺便说一句，以下是我用于上述影响的代码：

.lines *是菜单div。 .sb *是切换的div。

<script>
$(document).ready(function(){
    $(".lines").click(function(){
        $(".sb").fadeToggle(750);
    });
});
</script>

对于标记：

<div class="container">
  <div class="avatar"><img src="{PortraitURL-128}"></div>
    <div class="lines">☰</div>
</div>

这是一个小伙伴。 https://jsfiddle.net/e5o8pmpd/2/

Answer 1

好吧，我对您的CSS进行了细微更改并删除了.lines:hover css，而是使用jQuery制作动画，如下所示：

<强> DEMO

$(document).ready(function () {
    $(".lines").click(function () {
        $(".sb").fadeToggle(750).toggleClass('open'); //toggleClass along with fadeToggle
    });
    $(".lines").mouseover(function(){
        $(this).animate({
            'opacity':'1'
        },300)
    }).mouseout(function(){
        if(!$('.sb').hasClass('open')) //Check if menu is open or not by checking whether it has open class or not
            $(this).animate({
                'opacity':'0'
            },300)
    });
});

当切换的div处于活动状态时，保持div不会消失（jquery）

1 个答案: