Question

我开始学习JQuery。

这是我的代码：

的index.html

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <script type="text/Javascript" src="jquery.js"></script>
        <script src="my.js"></script>
        <title>My Jquery</title>
    </head>
    <body>

    <div class="parent"><img src="images.jpg" class="pic"/></div>
    </body>
</html>

stylesheet.css中

.pic
{
    border: 1px solid red;
    visibility: hide;
}
.parent
{
    background-color: yellow;
}

my.js

 $(document).ready(
                    function(){
                        $(".pic").click(
                                function(){
                                                $(this).slideToggle(5000);
                                          }
                                         );
                    });

问题是slideToggle通过水平/垂直滑动隐藏元素，除了我添加的图像。对于图像，它在对角线上滑动。为什么行为与图像不同？

Answer 1

尝试在.slideToggle()处理程序

中的$(this).parent()上调用click

＆＃13;

 $(document).ready(
   function() {
     $(".pic").click(
       function() {
         $(this).parent().slideToggle(5000);
       }
     );
   });

＆＃13;

.pic {
  border: 1px solid red;
  visibility: hide;
}
.parent {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="parent">
  <img src="http://lorempixel.com/100/100/nature" class="pic" />
</div>

＆＃13;

Answer 2

我终于解决了这个问题。这是通过设置图像的宽度

来完成的

.pic
{
    border: 1px solid red;
    display: block;
    width: 300px; //added this line

}

现在工作正常。

.slideToggle行为与图像不同

2 个答案: