Question

使用jquery效果。

我点击.div2，没有任何反应。无法解决这个问题。可能非常简单。我唯一的css设置div的宽度。没别了。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQ Effects</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="JQ_animation.css" />

        <script type="text/javascript">
            $(document).ready(function () {
                $(".div2").click(function () {
                    $(".div2").slideDown(3000);

                });
            });
        </script>

    </head>
    <body>
        <div class="div1">
            <div class="div2">Menu</div>
        </div>
    </body>

</html>

Answer 1

你叫同一个div 2次。那里没有什么滑动。滑动/可见隐藏项目的滑动工作。我假设您想要向下滑动显示菜单。以下是如何操作的示例。您可以将其更改为您自己的，

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/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">Hello world!</div>

</body>

Answer 2

slideDown（）适用于使用jQuery方法隐藏的元素，并且在CSS中显示：none。

在这里你没有隐藏.div2而你试图向下滑动而不是隐藏。尝试这样的事情。当最初按下菜单时，将隐藏并尝试按下相同的位置，您将获得下滑效果。

通过按下它们，这不是让div滑下来的好习惯。而是创建一个按钮，使按钮执行onclick功能而不是div。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQ Effects</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="JQ_animation.css" />

        <script type="text/javascript">
            $(document).ready(function () {
                $(".div2").click(function () {
                    $(".div2").slideUp(3000);

                });
        $(".div2").click(function () {
                    $(".div2").slideDown(3000);

                });
            });
        </script>

    </head>
    <body>
        <div class="div1">
            <div class="div2">Menu</div>
        </div>
    </body>

</html>

Jquery效果不起作用

2 个答案: