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();
    });
});

这是一个DEMO：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/

点击按钮后应永久显示

2 个答案: