jquery - 绕过/阻止 jQuery 中子 div 的 slideUp 事件

Question

在下面的代码中，我有一个链接，其 div id 是“my-acc-hover-container”。当用户将鼠标悬停在该链接上时，一个新的部分将向下滑动，其中包含“Hello Guest”和“Login/Sign Up”链接。当用户点击“登录/注册”链接时，将出现一个登录弹出窗口(名为#modal)。

<div id="my-acc-container-c">
    <a href="#"><h3>Hello Guest !</h3></a>
    <a id="modal_trigger" href="#modal" class=""><h3>Login/Sign Up</h3></a>

    <div id="modal" class="popupContainer" style="display:none;">
    <!--    LOGIN POPUP -->
    </div>  <!-- end of #modal-->

</div>  <!-- end of #my-acc-container-c-->  

这里的 jQuery 是:

$('#my-acc-container-c').mouseenter(function(){
    $('#my-acc-hover-container').slideDown(300);
    $('#my-acc-container-c').css("height","200px");
});

$('#my-acc-container-c').mouseleave(function(){
    $('#my-acc-hover-container').slideUp(300);
    $('#my-acc-container-c').css("height","100%");
});

但问题是，当用户点击“登录/注册”链接时，会出现登录弹出窗口，但仅持续 300 毫秒。我认为这可能是因为#modal 是#my-acc-hover-container 的子项。所以我只想显示弹出窗口但隐藏#my-acc-hover-container。谢谢。

Answer 1

<div id="my-acc-hover-container">
<a href="#"><h3>Hello Guest !</h3></a>
<a id="modal_trigger" href="#modal" class=""><h3>Login/Sign Up</h3></a>
</div>  <!-- end of #my-acc-hover-container-->  

<div id="modal" class="popupContainer" style="display:none;">
<!--    LOGIN POPUP -->
</div>  <!-- end of #modal-->

PFA 片段。将 #modal div 与“my-acc-hover-container”div 分开绑定(bind)将起作用。