Question

当我第一次点击问题时，您可以看到显示答案的动画。但当我关闭它并再次打开它时，它将默认为滑动，我的动画不再工作。

HTML

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>One Month jQuery</title>
            <!-- CSS -->
            <link rel="stylesheet" href="styles.css">
        </head>
        <body>
            <h1>Frequently Asked Questions</h1>
            <div class="panel">
                <div id="q1" class="question">1. What is jQuery?
                    <img id="arrow1-down" class="arrow down" src="assets/arrow-down.svg">
                    <img id="arrow1-up" class="arrow up collapse" src="assets/arrow-up.svg">
                </div>
                <div id="a1" class="answer collapse">
                    jQuery is a JavaScript framework, which purpose is to make it much easier to use JavaScript on your website. You could also describe jQuery as an abstraction layer, since it takes a lot of the functionality that you would have to write many lines of JavaScript to accomplish and wraps it into functions that you can call with a single line of code.
                </div>
            </div>
            <br>
            <div class="panel">
                <div id="q2" class="question">2. Do I need to know JavaScript to use jQuery?
                    <img id="arrow2-down" class="arrow down" src="assets/arrow-down.svg">
                    <img id="arrow2-up" class="arrow up collapse" src="assets/arrow-up.svg">
                </div>
                <div id="a2" class="answer collapse">
                    No, you don't need to know JavaScript to use jQuery. In fact, jQuery tries to simplify a lot of the complicated things with JavaScript, like AJAX calls and DOM manipulation, so that you may do these things without knowing JavaScript.
                </div>
            </div>
            <br>
            <div class="panel">
                <div id="q3" class="question">3. Does jQuery replace JavsScript?
                    <img id="arrow3-down" class="arrow down" src="assets/arrow-down.svg">
                    <img id="arrow3-up" class="arrow up collapse" src="assets/arrow-up.svg">
                </div>
                <div id="a3" class="answer collapse">
                    jQuery does NOT replace JavaScript, and while it does offer some syntactical shortcuts, the code you write when you use jQuery is still JavaScript code.
                </div>
            <br>
            <div class="panel">
                <div id="q4" class="question">4. Can I start learning jQuery without ever learning HTML & CSS?
                    <img id="arrow3-down" class="arrow down" src="assets/arrow-down.svg">
                    <img id="arrow3-up" class="arrow up collapse" src="assets/arrow-up.svg">
                </div>
                <div id="a4" class="answer collapse">
                    <img src="assets/no.gif" alt="No">
                </div>
            </div>
            <!-- JavaScript -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="index.js"></script>
        </body>
    </html>

CSS

body {
    color: #3b3b3b;
    margin: 50px 150px;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

h1 {
    font-size: 30px;
    font-weight: 200;
    margin-bottom: 30px;
}

.panel {
    cursor: pointer;
    font-size: 17px;
    font-weight: 200;
    border: 1px solid #f7f7f6;
}

.question {
    padding: 15px;
    background-color: #f7f7f6;
}

.question:hover {
    color: #149ed8;
}

.arrow {
    width: 17px;
    height: 11px;
    float: right;
    margin-top: 5px;
}

.answer {
    padding: 30px 10px;
    opacity: 0.08;
    font-style: italic;
    color: #999;
    font-size: 12px;
    line-height: 4;
    background: #CAE1FF;
}

.collapse {
    display: none;
}

JS

$(document).ready(function() {
    $(".question").click(function() {
        $(this).next().slideToggle("slow").animate({
            "opacity": "1",
            "line-height": "20",
            "padding": "10px"
        });
        $(this).children().toggleClass("collapse");
    });
});

Answer 1

添加标志以了解答案何时打开或关闭：

$(document).ready(function () {
    $(".question").click(function () {
        $(this).next().slideToggle("slow").animate({
            "opacity": "1",
            "line-height": "20",
            "padding": "10px"
        });
       //$(this).children().toggleClass("collapse");
        var open = ($(this).next().css("display") == "block");
        if(open){
            $(this).next().css({
                "opacity": "0.08",
                "line-height": "4",
                "padding": "30px 10px"
            });
        }
    });
});

工作示例：http://jsfiddle.net/Twisty/72kqvzy9/

如果页面未重新打开或未刷新，则不会触发.animate（）

1 个答案: