Question

在下面的代码中，我有一个div id为“my-acc-hover-container”的链接。当用户在此链接上悬停时，新部分将slideDown包含“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 Snippert。将#modal div与＆＃34; my-acc-hover-container＆＃34;分开绑定div会起作用。

Answer 2

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

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

即可

$(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%");
});

虽然流行音乐不是在小提琴中打开，但是内容正在从内部替换到最后一个。您可以通过检查元素进行检查。

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

2 个答案: