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