单击按钮后应永久显示

Question

我是 jQuery 新手，我尝试了一些东西。我创建了一个包含按钮的容器。如果我悬停容器，将显示此按钮。如果我将鼠标悬停在按钮上，则 css 再次更改，单击后会出现一个窗口。这工作正常。

这里是 HTML：

<div class="holder">
    <div class="button"><span>Button</span></div>
    <div class="window"></div>
</div>

还有 jQuery：

$(document).ready(function() {
    $('.holder').hover(function() {
        $('.button').css('display','block');
        $('.button').hover(function() {
            $(this).css('border','1px solid #999');
            $('.button span').css('color','#999');
        }, function() {
            $(this).css('border','1px solid #ccc');
            $('.button span').css('color','#ccc');
        });
    }, function() {
        $('.button').css('display','none');
    });
    $('.button').click(function() {
        $('.window').toggle();
        if ($('.window:visible').size() != 0) {
            return false;
        }
    });
    $(document).click(function() {
        $('.window').hide();
    });
    $('.window').click(function(e) {
        e.stopPropagation();
    });
});

这是一个演示：http://jsfiddle.net/9bf8f/15/

问题是按钮必须永久显示，直到窗口关闭。当我离开容器（持有人）时。

感谢您的帮助。

Answer 1

我不确定我是否正确理解了这个问题，但如果您想阻止按钮在被点击后被隐藏，您可以更改此设置：

$('.button').css('display','none');

到

$('.button:not(.active)').css('display','none');

并在按钮点击方法中添加以下内容：

$(this).addClass('active');

这只是在单击按钮后向按钮添加一个新类，并且仅在未设置此类时隐藏按钮。

这是jsfiddle

如果您只想在.window div 可见时阻止按钮隐藏，您可以简单地使用toggleClass() 而不是addClass()：

$(this).toggleClass('active');

Answer 2

这是我的标志解决方案

我存储了一个名为 var visibleFlag = false; 的标志，我正在根据需要设置它

完整代码：http://jsfiddle.net/9bf8f/17/