Question

我在高中，刚开始学习HTML，CSS和JQuery。我知道如何让列表中的各个项目滑入视图，但我不确定如何让它们向上滑动并在第二次单击项目后消失。到目前为止，这是我的代码：

.drop {
    width:200px;
    background-color:#000;
    padding:5px;
}
    .drop > p {
        color:white;
        text-align:center;
    }
.slide {
    display:none;
    width:180px;
    background-color:#fff;
    padding:5px;
    margin:auto;
}
        <!DOCTYPE html>
    <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <div class="drop inactive"> 
            <p>00/00/00</p>
            <div class="slide article-preview">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
            <a href=#>Read more...</a>
            </div>
        </div>
        <div class="drop inactive">
            <p>00/00/00</p>
            <div class="slide article-preview">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
            <a href=#>Read more...</a>
            </div>
        </div>
        <div class="drop inactive">
            <p>00/00/00</p>
            <div class="slide article-preview">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
            <a href=#>Read more...</a>
            </div>
        </div>
        <script type="text/javascript">
            $(".inactive").click(function(){
                $(".slide").slideUp('slow');
                $(this).children().slideDown("slow");
            });
        </script>
    </body>
</html>

Answer 1

这是一个不同的切换选项的小提琴。它使用jquery中的slideToggle函数来显示/隐藏指定的元素。设置数字而不是字符串“slow”，如（700）运行滑动功能超过700毫秒：

$(this).find(".slide").slideToggle("slow");

http://jsfiddle.net/agbb7n61/1/

如何创建一个上下滑动的垂直菜单？

1 个答案: