首先我们还是创建一个html文件,里面包含如下的html结构。
first pane
this script should allow only one pane to be visible at a time.
second pane
this script should allow only one pane to be visible at a time.
third pane
this script should allow only one pane to be visible at a time.
然后为页面定义如下css:
下面我们来介绍jquery.accordtion.js插件的实现。首先我们需要考虑的是如何隐藏pane里面的内容部分,也就是p标签。h1作为标题是不需要隐藏的。
(function ($) {
$.fn.accordtion = function () {
return this.each(function () {
$(this).find('p').hide();
});
}
})(jQuery);
页面调用的代码:
$(document).ready(function () {
$('#pane-container').accordtion();
});
插件代码很简单,就是找到class为pane的div下面的p,对其隐藏。接下来我们要实现的是,当用户点到h1的时候,对应的p标签的内容显示出来,同时其他h1对应的p标签的内容隐藏。代码如下:
//对h1标签设置click事件
self.delegate('h1', 'click', function () {
//为对应的p标签设置slideToggle效果
$(this).next('p').slideToggle(600)
//获取其他pane对象,找到他们下面的p标签,收起
.parent().siblings().children('p').slideUp(600);
});
现在我们的插件已经很有型了,最后要做的就是添加用户自定义属性options,这次我们只添加一个‘默认显示第几个pane'的属性。
//设置第几个元素显示
self.children(':eq(' + options.visibleByDefault + ')')//找到和options.visibleByDefault一致的pane对象
.children('p')
.show();
完整的代码大家还是下demo自己看吧。
jQuery.plugin.accordtion 谢谢大家的支持,希望本篇文章对你有帮助。如果对代码哪里有不清楚的地方,可以联系我。
Kenyataan:Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn