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

发布于
2015-12-20

先贴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(),点击标题显示了后立刻就消失了，正常来说应该是我点击才消失啊。这是为什么？

jquery javascript

阅读 6.2k

4 个回答

kikong

✓ 已被采纳

#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执行完以后的回调函数