1

次のコードでは、ユーザーが領域にカーソルを合わせると、ドロップダウン ボックスが表示されます。ユーザーが画面上のどこかをクリックすると、ボックスが消えることをユーザーは望んでいます。JavaScript と jQuery を使用してこれを達成する方法はありますか?

以下のコード ... ご回答ありがとうございます。

<script type="text/javascript">

    $(document).ready(function () {
        $(".password").fancybox({
            'width': 500,
            'height': 260,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
        });



        // Login drop down
        $(".signin").hover(function (e) {
            e.preventDefault();
            $(".signin_menu").show();
            $(".signin").addClass("menu-open");
        });
        $(".signin_menu").hover(function (e) {
            e.preventDefault();
            $(".signin_menu").show();
            $(".signin").addClass("menu-open");
        });
4

2 に答える 2

1

これを追加してみてください：

$('html').on('click', function() {
    $('.signin_menu:visible').hide();
});

$('.signin_menu > *').on('click', function(event) {
    event.stopPropagation();
});

ユーザーが .signin_menu の外側の要素をクリックすると、.signin_menu は非表示になります。

于 2013-07-18T15:39:06.533 に答える
0

関数 .hover() には複数のパラメーターを含めることができます ( http://api.jquery.com/hover/ )

2 番目のパラメーターを指定すると、"hoverOut" ハンドラーが追加されます。

これを試して：

$(".signin").hover(function (e) {
        e.preventDefault();
        $(".signin_menu").show();
        $(".signin").addClass("menu-open");
    },function(e){
        e.preventDefault();
        $(".signin_menu").hide();
        $(".signin").removeClass("menu-open");
    });
    $(".signin_menu").hover(function (e) {
        e.preventDefault();
        $(".signin_menu").show();
        $(".signin").addClass("menu-open");
    },function(e){
        e.preventDefault();
        $(".signin_menu").hide();
        $(".signin").removeClass("menu-open");
    });

最初の関数は HoverIn で、2 番目の関数は HoverOut です。そうすれば、マウスを箱から出すとドロップダウンが消えます。

于 2013-07-18T15:32:52.460 に答える