jQuery .slideUp div保持向下滑动

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 个解决方案

解决方案1
0 2018-08-03 01:46:42

jQuery .slideUp div保持向下滑动

问题描述

1 个解决方案

解决方案1 0 2018-08-03 01:46:42

解决方案1
0 2018-08-03 01:46:42