绕过/防止 jQuery 中子 div 的 slideUp 事件答案

【问题标题】：Bypass/prevent slideUp event for child div in jQuery绕过/防止 jQuery 中子 div 的 slideUp 事件
【发布时间】：2015-12-26 17:58:24
【问题描述】：

在下面的代码中，我有一个链接，其 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。谢谢。

【问题讨论】：

从#my-acc-hover-container 中取出#modal div。对话框将起作用。
我在您的代码中找不到 id my-acc-container-c
感谢 Bhavin Panchani，解决了。

标签： jquery html css

【解决方案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 分开绑定即可。

【讨论】：

【解决方案2】：

https://jsfiddle.net/8L7xtojr/2/

只需将 modal 的全部内容附加到正文

$(document).ready(function(){
    $('body').append($('#modal'));
});
$('#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%");
});

虽然 pop us 并没有在 fiddle 中打开，但内容正在从内部替换到主体的最后。你可以通过inspect元素来检查。

【讨论】：