单击任意位置即可关闭菜单

发布于 2024-11-25 09:29:21 字数 518 浏览 1 评论 0原文

正如你们所看到的,我有一个下拉菜单。

我有很多列,每个列都有一个打开菜单的选项。

$(".optionCont").live("click", function(){
    $(".dropMenuCont").slideUp();
    if ($(this).next().css("display") == "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

那么,如何在页面任意位置点击时实现菜单上滑呢?

就像文档点击一样?

我访问了其他主题,但不知道为什么,这不起作用。也许我正在以不同的方式做这件事。

我接受菜单编码中的任何提示。

演示:Jsfiddle

As you guys can see, I have a drop down menu.

I have a lot of columns, each one has an option to open the menu.

$(".optionCont").live("click", function(){
    $(".dropMenuCont").slideUp();
    if ($(this).next().css("display") == "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

So, how can I do the menu slideUp when I click in any place of the page?

Like a document click?

I visited others topics, but I don't know why, this is not working. Maybe I'm doing it in a diferent way.

I accept any tips in the menu coding.

Demo: Jsfiddle

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

人生百味 2024-12-02 09:29:21

在回调内部注册一个一次性处理程序,以确保下一次单击关闭菜单:

$(".optionCont").live("click", function(ev){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    ev.stopPropagation();

    $(document).one('click', function() {
             $(".dropMenuCont").slideUp();

    });
});

请参阅http://jsfiddle.net/alnitak/GcxMs/

Register a one-off handler inside the callback to make sure the next click closes the menu:

$(".optionCont").live("click", function(ev){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    ev.stopPropagation();

    $(document).one('click', function() {
             $(".dropMenuCont").slideUp();

    });
});

See http://jsfiddle.net/alnitak/GcxMs/

倚栏听风 2024-12-02 09:29:21
$(".optionCont").click(function(e){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    e.preventDefault();
    e.stopPropagation();
    return false;
});

$(document).click(function() {
     $(".dropMenuCont").slideUp();
});

这是 JSFiddle

$(".optionCont").click(function(e){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    e.preventDefault();
    e.stopPropagation();
    return false;
});

$(document).click(function() {
     $(".dropMenuCont").slideUp();
});

Here is the JSFiddle

木森分化 2024-12-02 09:29:21

尝试类似的方法:

$(document).click(function(e) {
   if ($(e.target) != myEl)
       myEl.slideUp();
})

替代方案:工作示例

来源:

$(".optionCont").live("click", function(e) {
    var that = this;
    $(document).click(function(e) {
        console.log(e.target);
        console.log(that);
        if (e.target != that) {
            e.stopPropagation();
            e.preventDefault();
            $(".dropMenuCont").slideUp();
        }
    });
    if ($(this).next().css("display") === "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
    e.stopPropagation();
    e.preventDefault();
});

Try something like:

$(document).click(function(e) {
   if ($(e.target) != myEl)
       myEl.slideUp();
})

Alternative: working example.

Source:

$(".optionCont").live("click", function(e) {
    var that = this;
    $(document).click(function(e) {
        console.log(e.target);
        console.log(that);
        if (e.target != that) {
            e.stopPropagation();
            e.preventDefault();
            $(".dropMenuCont").slideUp();
        }
    });
    if ($(this).next().css("display") === "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
    e.stopPropagation();
    e.preventDefault();
});
梦中的蝴蝶 2024-12-02 09:29:21

只需将点击绑定到

$('body').click(function() {
  $(".dropMenuCont").slideUp();
});

$('.dropMenuCont').click(function(e){
  e.stopPropagation();
});

Just bind the click to <body>

$('body').click(function() {
  $(".dropMenuCont").slideUp();
});

$('.dropMenuCont').click(function(e){
  e.stopPropagation();
});
不…忘初心 2024-12-02 09:29:21
$('body').bind("click",function (){
    $(".dropMenuCont").slideUp();
});
$('.dropMenuCont').click(function(event){
    event.stopPropagation();
});

我认为检查某些内容是否隐藏的更好主意是在动画回调中切换菜单上的类,然后使用 hasClass 检查它。

$('body').bind("click",function (){
    $(".dropMenuCont").slideUp();
});
$('.dropMenuCont').click(function(event){
    event.stopPropagation();
});

I think a better idea to check if something is hidden is to toggle the class on your menu in a callback of the animation and then check it with hasClass.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文