Question

在用户单击关闭“ x”按钮后，我希望我的“销售栏”滑动。

一切正常-使用“关闭”按钮-但是我添加了一个表单，如果我将“关闭”按钮放在表单中（使其直接插入），则slideUp仅持续一秒钟，滑回原位-它应该保持“消失”状态。

    <html>
<head>
    <title></title>

    <style type="text/css">
    body {
        margin: 0px;
    }

    .top-general-alert {
        padding: 8px;
        border: none;
        font-size: 1em;
        line-height: 2em;
        text-align: center;
        display: none;
        background-color: #00294e;
        color: #ffee7a;
    }

    .top-general-alert {
        color: #fff;
    }

    .top-general-alert a,
    .top-general-alert a:hover {
        color: #0099cc;
    }
    </style>
</head>
<body>


<div class="top-general-alert" >
    <form class="form-inline">
        <div class="form-group">
            <label for="newsletter">Sign-up for our newsletter! </label>
            <input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
        <button type="submit" class="btn btn-default">Sign-up!</button> <button class="close-top-general-alert" >&times;</button>
        </div>
    </form>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    if ( $('.top-general-alert').length > 0 ) {

        $('.top-general-alert').delay(800).slideDown('medium');

        $('.close-top-general-alert').click( function() {
            $('.top-general-alert').slideUp('fast');
        });

    }

});
</script>
</body>
</html>

（贷记https://www.buildersociety.com/threads/hellobar-free-alternative-devseries.1519/）

要清楚；如果我进行以下修改（在下面），将关闭按钮移到表单外部。行为是正确的。但是按钮在表格下方

<div class="top-general-alert" >
    <form class="form-inline">
        <div class="form-group">
            <label for="newsletter">Sign-up for our newsletter! </label>
            <input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
        <button type="submit" class="btn btn-default">Sign-up!</button> 
        </div>
    </form>

×

Answer 1

hide()之后的slideUp()怎么样？

$('.top-general-alert').slideUp('fast').hide('fast');

编辑：form按钮会导致页面重新加载。添加type=button或type=reset即可。

下面的完整示例：

$(document).ready(function() {

    if ( $('.top-general-alert').length > 0 ) {

        $('.top-general-alert').delay(800).slideDown('medium');

        $('.close-top-general-alert').click( function() {
            $('.top-general-alert').slideUp('fast').hide('fast');
        });

    }

});

body {
    margin: 0px;
}

.top-general-alert {
    padding: 8px;
    border: none;
    font-size: 1em;
    line-height: 2em;
    text-align: center;
    display: none;
    background-color: #00294e;
    color: #ffee7a;
}

.top-general-alert {
    color: #fff;
}

.top-general-alert a,
.top-general-alert a:hover {
    color: #0099cc;
}

<div class="top-general-alert" >
    <form class="form-inline">
        <div class="form-group">
            <label for="newsletter">Sign-up for our newsletter! </label>
            <input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
        <button type="submit" class="btn btn-default">Sign-up!</button> <button type="reset" class="close-top-general-alert" >&times;</button>
        </div>
    </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery .slideUp div保持向下滑动

1 个答案: