Jquery .hide（）可以工作，但.slideUp（）不能'；T_Jquery

Jquery .hide（）可以工作，但.slideUp（）不能'；T

jquery

Jquery .hide（）可以工作，但.slideUp（）不能'；T,jquery,Jquery,当单击类的任何元素按钮时，我试图对类的所有元素行使用jQuery的slideUp（）方法，但当我单击按钮时，似乎什么都没有发生。但是，当我将.slideUp（）换成.hide（）时，行元素确实隐藏了。这可能是什么原因造成的我正在使用引导，以防万一 HTML: CSS: 也许这会帮助你缩小范围，如果必要的话，我会删除这个答案，但是这段代码在Bootstrap4中似乎工作得很好 $（文档）.ready（函数（）{ $（“.btn”）。单击（函数（）{ $（“.row”）.slideUp（）； }

当单击类的任何元素

按钮

时，我试图对类的所有元素

行

使用jQuery的

slideUp（）

方法，但当我单击按钮时，似乎什么都没有发生。但是，当我将

.slideUp（）

换成

.hide（）

时，

行

元素确实隐藏了。这可能是什么原因造成的

我正在使用引导，以防万一

HTML:

CSS:

也许这会帮助你缩小范围，如果必要的话，我会删除这个答案，但是这段代码在Bootstrap4中似乎工作得很好

$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
$（“.row”）.slideUp（）；
});
});
main.form组
{
/*覆盖表单输入元素的引导默认100%宽度*/
宽度：30%；
/*中心表单输入*/
浮动：无；
保证金：0自动；
}
主要的
{
/*中心目录*/
文本对齐：居中；
}
.错误
{
/*红色表示错误*/
颜色：#FF0000；
/*中心错误列表项*/
文本对齐：居中；
填充：0；
}
卡片
{
身高：100%；
}

身体健康
照顾好你的身体
身体健康
照顾好你的身体
身体健康
照顾好你的身体
这是一种否定的证明，似乎效果不错。请参阅下面的功能代码段。您是否在控制台中看到任何.js错误？是的，很抱歉，我刚刚开始，没有考虑检查。我收到一个“TypeError:$（…）。slideUp不是函数”错误。@JasonB我将我的链接添加到了帖子中，所以看起来您试图加载jQuery两次，一次从jQuery.com加载，一次从Google加载。将这两行代码添加到这里的代码片段并没有在Chrome中破坏它。这个错误使jQuery看起来好像没有加载或有冲突。尝试用jQuery（document）中的jQuery替换$。ready（…并查看是否出现类似错误。看起来您实际使用的是没有slideUp功能的精简版jQuery。请仔细检查您使用的链接。现在我看到了错误，我能够加载精简版的jQuery并得到相同的错误。jQuery链接-
<!DOCTYPE html>

<html lang="en">

    <head>

        <!-- required meta tags -->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" href="/static/styles.css">

        <!-- http://jquery.com/ -->
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <!-- app's own JavaScript -->
        <script src="/static/scripts.js"></script>

        <title>Happiness Goals: {% block title %}{% endblock %}</title>

    </head>

    <body>

        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="/">Happiness Goals</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                {% if session.user_id %}
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"><a class="nav-link" href="/set">Set</a></li>
                        <li class="nav-item"><a class="nav-link" href="/track">Track</a></li>
                    </ul>
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item"><a class="nav-link" href="/change_password">Change Password</a></li>
                        <li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
                    </ul>
                {% else %}
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
                        <li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
                    </ul>
                {% endif %}
            </div>
        </nav>

        <main class="container p-5">

            {% with errors = errors %}
                {% if errors %}
                    <div>
                        <ul class="errors">
                        {% for error in errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            {% endwith %}

            {% block main %}{% endblock %}

        </main>

        <!-- Bootstrap Javascript links -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    </body>

</html>

{% extends "layout.html" %}

{% block title %}
    Home
{% endblock %}

{% block main %}
    <div class="row" id="cards1">
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top" src="{{url_for('static', filename='asanas.jpg')}}" alt="exercise_image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Physical Health</h5>
            <p class="card-text">Take care of your body</p>
            <a href="#" class="btn btn-primary">Set a Goal</a>
          </div>
        </div>

        <div class="card">
          <img class="card-img-top" src="{{url_for('static', filename='thanks2.png')}}" alt="exercise_image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Gratitude</h5>
            <p class="card-text">Count your blessings</p>
            <a href="#" class="btn btn-primary">Set a Goal</a>
          </div>
        </div>

        <div class="card">
          <img class="card-img-top" src="{{url_for('static', filename='friends2.jpg')}}" alt="exercise_image" >
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Relationships</h5>
            <p class="card-text">Feel the love</p>
            <a href="#" class="btn btn-primary">Set a Goal</a>
          </div>
        </div>


      </div>

    </div>

    <div class="row pt-4" id="cards2">
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image" >
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Giving Back</h5>
            <p class="card-text">Help others and feel useful</p>
            <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
          </div>
        </div>

        <div class="card">
          <img class="card-img-top img-fluid" src="{{url_for('static', filename='spirituality.png')}}" alt="exercise_image" >
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Spirituality</h5>
            <p class="card-text">Connect to something larger than yourself</p>
            <a href="#" class="btn btn-primary">Set a Goal</a>
          </div>
        </div>

        <div class="card">
          <img class="card-img-top img-fluid" src="{{url_for('static', filename='old.png')}}" alt="exercise_image" >
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Other</h5>
            <p class="card-text">You know you best! What do you think will make you happy?</p>
            <a href="#" class="btn btn-primary">Set a Goal</a>
          </div>
        </div>
      </div>
    </div>


{% endblock %}

$( document ).ready(function() {
    $( ".btn" ).click(function () {
        $( ".row" ).slideUp();
    });
});

main .form-group
{
    /* override Bootstrap's default 100% width for form input elements */
    width: 30%;

    /* center form inputs */
    float: none;
    margin: 0 auto;
}

main
{
    /* center contents */
    text-align:center;
}

.errors
{
    /* red color for errors */
    color: #FF0000;

    /* center error list items */
    text-align: center;
    padding: 0;
}

.card
{
    height: 100%;
}