jquery select parent not child

我需要选择父div而不是child，我该如何在jQuery中做到这一点。基本上我想创建一个简单的登录框，它应该隐藏当且仅当我点击父div时，如果我点击子div不应该隐藏。
以下是代码。jquery select parent not child

jQuery(document).ready(function() 
 
    { 
 
     jQuery("li.login-link").click(function() 
 
     { 
 
      jQuery("div#login-container").css("display", "block"); 
 
     }); 
 
     jQuery("div#login-container not:(div#login-box)").click(function() 
 
     { 
 
      jQuery("div#login-container").css("display", "none"); 
 
     }); 
 
    });

<div id="login-container"> <!--parent div. Should hide when i click on this div--> 
 
    <div id="login-box"> <!--child div. Should not hide parent when i click on this--> 
 
     
 
    </div> 
 
</div>

来源

2015-07-10 Gyan Parkash

对不起你什么意思？因为你有一个ID ......用它来选择元素 –

我的要求是，当我点击的div＃登录容器它会（＃登录框） –

您可以使用.parent()：https://api.jquery.com/parent/

$('div#login-box').parent()

或

$('div#login-box').parent('div#login-container')

编辑

按下面的评论，我觉得你是停止传播之后：https://api.jquery.com/event.stoppropagation/

//hide the box when you click the parent: 
$('div#login-container').click(function() { $(this).hide() }); 

// stop child click bubbling up to parent 
$('div#login-box').click(function(e) { 
    e.stopPropagation(); 
});

来源

2015-07-10 08:14:25 Pete

其实我想隐藏登录容器只有当父（div＃登录容器）被点击而不是孩子（div＃登录框）点击事件 –

@GyanParkashm，请参阅编辑我的回答 – Pete

感谢伙计它的工作原理，这正是我想要的 –

检查这一项

HTML：

<div id="login-container"> 
    <div id="login-box"> 
     Hi 
    </div> 
</div>

JS：

$("div#login-box").click(function() 
{ 
    $(this).parent().css("background-color","red") 
    console.log() 
});

来源

2015-07-10 08:20:44

尝试

jQuery(function($) { 
 
    $("#login-container").click(function(e) { 
 
    if (!$(e.target).closest('#login-box').length) { 
 
     $("div#login-container").hide(); 
 
    } 
 
    }); 
 
});

#login-container { 
 
    border: 1px solid red; 
 
    padding: 20px; 
 
    min-height: 100px; 
 
} 
 
#login-box { 
 
    border: 1px solid green; 
 
    padding: 20px; 
 
    min-height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="login-container"> 
 
    <div id="login-box"> 
 

 
    </div> 
 
</div>

来源

2015-07-10 08:39:01

jquery select parent not child

回答

相关问题