开发者社区> 问答> 正文

jQuery用toggle()显示隐藏元素的问题

小旋风柴进 2016-05-27 11:10:55 1032

先贴css和body

<style>
    #panel { width: 300px; height: 300px; margin-left:40px;}
    .head {border: 1px solid black; background: pink; text-align: center; height: 40px; line-height: 40px; width: 300px;}
    .content { width: 300px; height: 200px; display: none; border:1px solid black;}
</style>
</head>
<body>
     <div id="panel">
         <h5 class="head">什么是jQuery</h5>
         <div class="content">
             jQuery是继Prototype之后有一个优秀的JS库
         </div>
     </div>
</body>

两种JS写法,结果却不一样,第二种写法点击后展开并立刻消失

    $(document).ready(function(){
        $("#panel h5.head").click(function() {
            $(this).next().slideToggle(function() {
                $(this).next().show();
            }, function() {
                $(this).next().hide();
            });
        });
    })
     $(document).ready(function(){
        $contents = $(".content");
        $("#panel h5.head").click(function() {
            $contents.slideToggle(function() {
                $contents.show();
            }, function() {
                $contents.hide();
            });
        });
    })

我就是把第一种写法里面的$(this).next()直接赋给变量$contents,然后替换掉所有的$(this).next(),点击标题显示了后立刻就消失了,正常来说应该是我点击才消失啊。这是为什么?

移动开发 JavaScript 前端开发
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:17:25

    #panel h5.head的next就是div.content
    我们先不论API是否使用正确
    A.

    $("#panel h5.head").click(function() {
        $(this).next().slideToggle(function() {
            $(this).next().show();
        }, function() {
            $(this).next().hide();
        });
    });

    $(this).next()中的this已经不是head元素了,而是.content元素也就是$(this).next().slideToggle中的$(this).next()指向的DOM元素,那么$(this).next()就是什么都没有,是空的,所以$(this).next().hide();没有任何效果的`

    B. 回调函数的作用是当show/hide动画效果结束后的后续处理

    了解了上面的,就好理解

    $contents = $(".content");
    $("#panel h5.head").click(function() {
        $contents.slideToggle(function() {
            $contents.show();
        }, function() {
            $contents.hide();
        });
    });

    表现的行为了,显示后再回调中马上又hide拉;
    slideToggle干的就是show/hide的活,你再在回调中设置show/hide干嘛呢

    再来说说API,jQuery对于slideToggle的接口调用有如下方式
    `.slideToggle( [duration ] [, complete ] )
    .slideToggle( options )
    .slideToggle( [duration ] [, easing ] [, complete ] )`
    似乎没有接受2个回调函数的接口啊
    你的代码子所以能够运行时因为
    你传入了2个参数,那么使用slideToggle( [duration ] [, complete ] )
    duration类型不匹配,使用默认值,你设置的函数被丢弃
    第2个函数为slideToggle执行完以后的回调函数

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程