Question

我想创建一个向下滑动面板，但它不起作用，请你建议我

<!DOCTYPE html>
<html>
<head>
$(Document).Ready(function(){
    $("#flip").Click(funcTion(){
        $("#panel").slidedown("slow");
    });
});
</script>


</head>
<body>

<div id="flip">Click to slide down panel</div>
<div id="panel"> This is content</div>

</body>
</html>

Answer 1

首先你有包含库，你不能写函数就像funcTion或者slideDown可以滑动

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#flip").click(function() {
                    $("#panel").slideDown("slow");
                });
            });
        </script>

        <style> 
            #panel, #flip {
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
            }

            #panel {
                padding: 50px;
                display: none;
            }
        </style>
    </head>
    <body>

        <div id="flip">Click to slide down panel</div>
        <div id="panel">This is content</div>

    </body>
</html>

Answer 2

检查脚本标记您忘记了脚本标记和库 并首先隐藏要滑动的div

Your Working DEMO here click

<html>
        <head>
<!--import your jquery library-->
        <script>
        $(Document).Ready(function(){
            $("#flip").Click(funcTion(){
                $("#panel").slidedown("slow");
            });

    });
    </script>

我想创建一个向下滑动面板

2 个答案: