.hide（）有效，但.slideUp（）没有

时间：2018-06-19 00:59:45

标签： jquery

当点击类.slideUp()的任何元素时，我试图在类row的所有元素上使用jQuery的button方法，但是当我点击时似乎没有任何事情发生在一个按钮上。但是，当我为.slideUp()换出.hide()时，row元素确实隐藏了。可能导致这种情况的原因是什么？

我正在使用Bootstrap，以防万一。

HTML：

<!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 %}

JS：

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

CSS：

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%;
}

1 个答案:

答案 0 :(得分：0)

也许这会帮助你缩小范围，如果有必要我会删除这个答案，但是这个代码似乎与Bootstrap4一起使用。

$( 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%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

 <script src="https://code.jquery.com/jquery-latest.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
<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='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='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>

相关问题
最新问题