0

I am new in jQuery and I tried something. I created a container which holds a button. This button will be displayed if I am hovering the container. If I am hovering the button the css changed again and after a click a window occurred. This is working fine.

So here is the HTML:

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

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

And here is a DEMO: http://jsfiddle.net/9bf8f/15/

The problem is that the button has to be displayed permanently until the window is closed. Also when I leave the container (holder).

Thank you for helping.

4

2 回答 2

0

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

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

至

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

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

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

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

这是一个jsfiddle

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

$(this).toggleClass('active');
于 2013-09-02T22:15:26.383 回答
0

这是我的标志解决方案

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

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

于 2013-09-02T22:22:29.973 回答