Javascript 单击$（文档）时如何使用jquery隐藏/关闭div？_Javascript_Jquery_Jquery Selectors

Javascript 单击$（文档）时如何使用jquery隐藏/关闭div？

javascript jquery

Javascript 单击$（文档）时如何使用jquery隐藏/关闭div？,javascript,jquery,jquery-selectors,Javascript,Jquery,Jquery Selectors,我有一个简单的下拉菜单，我想让这个菜单关闭/隐藏自动如果任何区域以外的点击。想不出一个简单的方法来做到这一点。如果可能的话，我会喜欢JFIDLE上的解决方案/示例 JQuery: $('.micropostOptions').on('click',function(){ var postMenu = $(this).find('.postMenu'); if(postMenu.is(':hidden') ){ $('.postMenu').hide();

我有一个简单的下拉菜单，我想让这个菜单关闭/隐藏自动如果任何区域以外的点击。想不出一个简单的方法来做到这一点。如果可能的话，我会喜欢JFIDLE上的解决方案/示例

JQuery:

$('.micropostOptions').on('click',function(){
    var postMenu = $(this).find('.postMenu');

    if(postMenu.is(':hidden') ){
        $('.postMenu').hide();
        $('.micropostOptions').removeClass("postMenuHoverState");
        postMenu.show();
        $(this).hide().addClass('postMenuHoverState').show(60);

    }else{
        postMenu.hide() ;
        $(this).removeClass("postMenuHoverState");
    }


});

.micropostOptions {
    position:absolute;
    height:17px;
    width:17px  ;
    top:5px;
    right:5px;
    background:white url("/assets/arrow_down_alt1.png") no-repeat;
    background-position:0px 0px;

        &:hover {
            background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
            background-position:0px 0px;
            cursor:pointer !important;

        }

}

.postMenuActivate {
    display:block;
}

.postMenuHoverState {
    background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
    background-position:0px 0px;
    cursor:pointer !important;
}

.postMenu {
    position:absolute;
    display:none;
    padding-bottom:20px;
    background-color:white !important;
    border:1px solid $main-background-color;
    height:163px;
    width:170px;
    top:18px;
    right:2px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
    color:gray;
    z-index:3000;

        li {

        font-size:12px;
        height:33px;
        background-color:white !important;

            a span {
                float:left;
                width:160px;
                height:33px;
                line-height:33px;
                padding-left:10px;
                color:gray;

                  &:hover {
                    background-color:#4D90FE !important;
                    color:white;
                    //  #DD4B39,#D14836
                    }
            }

            &:hover {
            background-color:#4D90FE;
            color:white;

            }
        }

        .deletePost {
            //position:relative;
            padding-top:0px !important;
            padding-left:0px !important;
            height:39px;
            width:170px;
            text-align:center;
            padding-bottom:7px;
            border-bottom:1px solid #d9d9d9;

                a {

                    span {
                    float:left;
                    padding-left:0px !important;                            
                        height:46px !important;
                        width:170px !important;
                        line-height:46px;
                    }
                }

                a span:hover {
                    background-color:#DD4B39 !important;
                    color:white;
                //  #DD4B39,#D14836
                }
        }

        .reportAbuse {
            border-top:1px solid #d9d9d9;

                a span:hover {
                    background-color:gray !important;;
                }

        }

}

    <nav class="micropostOptions">
     <ul class="postMenu">
       <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
       </li>
       <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
       <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
       <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
       <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
     </ul>  
   </nav>

sCSS:

$('.micropostOptions').on('click',function(){
    var postMenu = $(this).find('.postMenu');

    if(postMenu.is(':hidden') ){
        $('.postMenu').hide();
        $('.micropostOptions').removeClass("postMenuHoverState");
        postMenu.show();
        $(this).hide().addClass('postMenuHoverState').show(60);

    }else{
        postMenu.hide() ;
        $(this).removeClass("postMenuHoverState");
    }


});

.micropostOptions {
    position:absolute;
    height:17px;
    width:17px  ;
    top:5px;
    right:5px;
    background:white url("/assets/arrow_down_alt1.png") no-repeat;
    background-position:0px 0px;

        &:hover {
            background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
            background-position:0px 0px;
            cursor:pointer !important;

        }

}

.postMenuActivate {
    display:block;
}

.postMenuHoverState {
    background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
    background-position:0px 0px;
    cursor:pointer !important;
}

.postMenu {
    position:absolute;
    display:none;
    padding-bottom:20px;
    background-color:white !important;
    border:1px solid $main-background-color;
    height:163px;
    width:170px;
    top:18px;
    right:2px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
    color:gray;
    z-index:3000;

        li {

        font-size:12px;
        height:33px;
        background-color:white !important;

            a span {
                float:left;
                width:160px;
                height:33px;
                line-height:33px;
                padding-left:10px;
                color:gray;

                  &:hover {
                    background-color:#4D90FE !important;
                    color:white;
                    //  #DD4B39,#D14836
                    }
            }

            &:hover {
            background-color:#4D90FE;
            color:white;

            }
        }

        .deletePost {
            //position:relative;
            padding-top:0px !important;
            padding-left:0px !important;
            height:39px;
            width:170px;
            text-align:center;
            padding-bottom:7px;
            border-bottom:1px solid #d9d9d9;

                a {

                    span {
                    float:left;
                    padding-left:0px !important;                            
                        height:46px !important;
                        width:170px !important;
                        line-height:46px;
                    }
                }

                a span:hover {
                    background-color:#DD4B39 !important;
                    color:white;
                //  #DD4B39,#D14836
                }
        }

        .reportAbuse {
            border-top:1px solid #d9d9d9;

                a span:hover {
                    background-color:gray !important;;
                }

        }

}

    <nav class="micropostOptions">
     <ul class="postMenu">
       <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
       </li>
       <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
       <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
       <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
       <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
     </ul>  
   </nav>

HTML:

$('.micropostOptions').on('click',function(){
    var postMenu = $(this).find('.postMenu');

    if(postMenu.is(':hidden') ){
        $('.postMenu').hide();
        $('.micropostOptions').removeClass("postMenuHoverState");
        postMenu.show();
        $(this).hide().addClass('postMenuHoverState').show(60);

    }else{
        postMenu.hide() ;
        $(this).removeClass("postMenuHoverState");
    }


});

.micropostOptions {
    position:absolute;
    height:17px;
    width:17px  ;
    top:5px;
    right:5px;
    background:white url("/assets/arrow_down_alt1.png") no-repeat;
    background-position:0px 0px;

        &:hover {
            background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
            background-position:0px 0px;
            cursor:pointer !important;

        }

}

.postMenuActivate {
    display:block;
}

.postMenuHoverState {
    background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
    background-position:0px 0px;
    cursor:pointer !important;
}

.postMenu {
    position:absolute;
    display:none;
    padding-bottom:20px;
    background-color:white !important;
    border:1px solid $main-background-color;
    height:163px;
    width:170px;
    top:18px;
    right:2px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
    color:gray;
    z-index:3000;

        li {

        font-size:12px;
        height:33px;
        background-color:white !important;

            a span {
                float:left;
                width:160px;
                height:33px;
                line-height:33px;
                padding-left:10px;
                color:gray;

                  &:hover {
                    background-color:#4D90FE !important;
                    color:white;
                    //  #DD4B39,#D14836
                    }
            }

            &:hover {
            background-color:#4D90FE;
            color:white;

            }
        }

        .deletePost {
            //position:relative;
            padding-top:0px !important;
            padding-left:0px !important;
            height:39px;
            width:170px;
            text-align:center;
            padding-bottom:7px;
            border-bottom:1px solid #d9d9d9;

                a {

                    span {
                    float:left;
                    padding-left:0px !important;                            
                        height:46px !important;
                        width:170px !important;
                        line-height:46px;
                    }
                }

                a span:hover {
                    background-color:#DD4B39 !important;
                    color:white;
                //  #DD4B39,#D14836
                }
        }

        .reportAbuse {
            border-top:1px solid #d9d9d9;

                a span:hover {
                    background-color:gray !important;;
                }

        }

}

    <nav class="micropostOptions">
     <ul class="postMenu">
       <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
       </li>
       <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
       <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
       <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
       <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
     </ul>  
   </nav>



:delete，：confirm=>“确定吗？”，：title=>m.content，：class=>“message\u delete”%>

亲切的问候

像这样的：

$('html').click(function() {
$('.postMenu').hide();
});

大概是这样的：

$('html').click(function() {
$('.postMenu').hide();
});

试试这个：

// Fast way to attach handlers to body
$(document.body).click(function(ev) {
    // Get the clicked element through ev.target
    var clickedElement = $(ev.target);
    // If the element is a visible .postMenu, then ignore.
    if(clickedElement.is('.microPostOptions:visible')) {
        return;
    }
    // If not then slide it up. Note else not needed as we returned early.
    $('.microPostOptions').slideUp();
});

试试这个：

// Fast way to attach handlers to body
$(document.body).click(function(ev) {
    // Get the clicked element through ev.target
    var clickedElement = $(ev.target);
    // If the element is a visible .postMenu, then ignore.
    if(clickedElement.is('.microPostOptions:visible')) {
        return;
    }
    // If not then slide it up. Note else not needed as we returned early.
    $('.microPostOptions').slideUp();
});

基本上，您需要这样做：

$('html').click(function() {
$('.postMenu').hide();
});

基本上，您需要这样做：

$('html').click(function() {
$('.postMenu').hide();
});

嗨，使用e.target和ev.target有什么区别？这让我找到了我的答案。postMenu需要替换为micropostOptions@LondonGuy：e和ev之间无任何内容，您可以随意命名参数-相同的对象，不同的名称。我修改了我的答案，以考虑到你的微操课。嗨，使用e.target和ev.target有什么区别？这让我找到了我的答案。postMenu需要替换为micropostOptions@LondonGuy：e和ev之间无任何内容，您可以随意命名参数-相同的对象，不同的名称。我修改了我的答案以考虑到你的课堂。