Question

这是我的功能，

$(document).ready(function () {
   $('.a').click(function () {
     var here = $(this).next('.b');
    if (here.is(":visible")) {
        here.hide();
    } else {
        here.show();
    }
    return false;
  });
});

因此，每当我点击该按钮时，它会在同一网页上打开一个小标签。每当我再次点击它关闭它。但是一旦我打开标签，我就可以通过点击除标签之外的网页上的某个位置来关闭它。我必须再次单击该按钮才能关闭它。

如何通过单击按钮上的某个位置来关闭标签？

Answer 1

您想检查身体上的点击：

$path--rel      : "../images";

@mixin img-replace($img, $w, $h, $disp: block) {
    background-image: url('#{$path--rel}/#{$img}');
    background-repeat: no-repeat;
    width: $w;
    height: $h;
    display: $disp;
}


.site-logo {
  @include img-replace("logo.png", 104px, 47px, inline-block);
  margin-top: 8px;
  margin-left: 6px;
}

$("body").click(function(e) { if(e.target.id !== 'menu'){ $("#menu").hide(); } });将是菜单的ID。

如果单击正文并且单击div的id不等于菜单的id，则会关闭。

Answer 2

检查此实施

＆＃13;

jQuery(document).ready(function() {
    $(document).on('click','body, #btn',function(ev){
        ev.stopPropagation()
        if(ev.target.id== "btn"){
            if($('#modal').is(':visible')) {
                  $('#modal').fadeOut();
            } else{
              $('#modal').fadeIn();
            }
          } else {
            $('#modal').fadeOut();
        }
      });
});

＆＃13;

html, body {
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
  Click Me!
</button>

<div id="modal" style="background-color:red;display:none;">
  BLA BLA BLA
</div>

＆＃13;

Answer 3

在单击文档时，最近的有助于检查是否已单击选项卡：

$(document).click(function (e) {
    if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
       $('.b').hide();
    }
});

Answer 4

我最终在几乎每个项目中都进行了搜索，因此，如果对任何人有帮助，我都会制作此插件：

它需要一个回调函数并传递您的原始选择器，因此您可以执行以下操作：

精美，可链接的优雅代码。

Answer 5

要检查被单击的元素是否在给定容器（即菜单）之外，我们可以简单地检查事件目标是否为容器的子对象。使用JQuery-

$('body').click(function(e) {

    if ( 0 === $(e.target).parents('#container-id').length ) {

        /// clicked outside -> do action

    }

})

Answer 6

package jetty;

import org.eclipse.jetty.server.CustomRequestLog;
import org.eclipse.jetty.server.Request;
import org.eclipse.jetty.server.Response;

public class ErrorOnlyRequestLog extends CustomRequestLog
{
    public ErrorOnlyRequestLog(Writer writer, String formatString)
    {
        super(writer, formatString);
    }

    public ErrorOnlyRequestLog(String file)
    {
        super(file);
    }

    public ErrorOnlyRequestLog(String file, String format)
    {
        super(file, format);
    }

    @Override
    public void log(Request request, Response response)
    {
        // Get the response status actually sent (as you cannot rely on
        // the Response.getStatus() at this point in time, which can change
        // due to a number of factors, including error handling, dispatch
        // completion, recycling, etc)
        int committedStatus = response.getCommittedMetaData().getStatus();

        // only interested in error cases - bad request & server errors
        if ((committedStatus >= 500) || (committedStatus == 400))
        {
            super.log(request, response);
        }
        else
        {
            System.err.println("### Ignored request (response.committed.status=" + committedStatus + "): " + request);
        }
    }
}

单击外部菜单将其关闭

6 个答案: