先贴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(),点击标题显示了后立刻就消失了，正常来说应该是我点击才消失啊。这是为什么？
写回答
#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执行完以后的回调函数
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
