0

私は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/

問題は、ウィンドウが閉じられるまでボタンを永続的に表示する必要があることです。また、コンテナ（ホルダー）を離れるときも。

助けてくれてありがとう。

4

2 に答える 2

0

質問を正しく理解しているかどうかはわかりませんが、ボタンがクリックされたときにボタンが非表示になるのを止めたい場合は、これを変更できます。

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

に

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

ボタンクリックメソッドに次を追加します。

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

これは、クリックされるとボタンに新しいクラスを追加するだけで、このクラスが設定されていない場合にのみボタンを非表示にします。

ここにjsfiddleがあります

div が表示されているときにボタンが非表示になるのを止めたくない場合は、代わりに次のように.window単純に使用できます。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 に答える