jQuery手风琴不删除阶级,而不是将其扩展文本换成崩溃
题
感谢@ifaour的很多帮助!该脚本包括:
- 使用无序列表的jQuery手风琴。
- 带有切换子弹箭头图像的活动和非活动状态
- 扩展全部 /折叠所有内容。
- 当手风琴扩展和崩溃时,相等的高度柱扩展和崩溃
您可以在这里查看演示 http://jsbin.com/ucobo3/24/
(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
if ($.browser.msie && $.browser.version == 6.0) { $(this).height(tallest); }
$(this).css('min-height', tallest + 'px').css('overflow', 'auto');
});
}
})(jQuery);
jQuery.fn.initMenu = function() {
var isCollapsed = true; // default value
var collapseAll = 'Collapse All';
var expandAll = 'Expand All';
$('.swap').click(function() {
if(!isCollapsed)
{
$('ul.menu li ul').slideUp('normal');
$('ul.menu li').removeClass('active');
$(this).text(expandAll);
isCollapsed = true;
} else {
$('ul.menu li ul').slideDown('normal');
$('ul.menu li').addClass('active');
$(this).text(collapseAll);
isCollapsed = false;
}
return false;
});
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).parent().addClass('active');
}
else {
$(this).prev().parent().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().parent().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().parent().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().parent().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {
$('.menu').initMenu();
$('.column').equalHeights();
});
谢谢!!
解决方案
这是我的尝试:
jQuery.fn.initMenu = function() {
var isCollapsed = true; // default value
var collapseAll = 'Collapse All';
var expandAll = 'Expand All';
$('.swap').click(function() {
if(!isCollapsed)
{
$('ul.menu li ul').slideToggle('normal');
$('ul.menu li a').removeClass('active');
$(this).text(expandAll);
isCollapsed = true;
} else {
$('ul.menu li ul').slideToggle('normal');
$('ul.menu li a').addClass('active');
$(this).text(collapseAll);
isCollapsed = false;
}
return false;
});
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {$('.menu').initMenu();});
示例链接.
自从 .swap
链接对于所有人都是常见的,无需将其放在 each
环形。
其他提示
您非常接近,问题存在于您使用的.text()设置链接的位置。
$(this).text($(this).text().prev() == 'Click to Collapse');
那条代码线试图在$(this)上设置文本,并返回 $(this).text().prev() == 'Click to Collapse');
$(this).text()
返回字符串“单击要折叠”。
.prev()
是字符串上的有效功能,因此会导致JavaScript错误。
你想做的是 $(this).text("Click to Expand");
最终结果将是这样的:
$('.swap').click(function()
{
if($(this).text() == 'Click to Collapse')
{
$('ul.menu li ul').slideToggle('normal');
$('ul.menu li a').removeClass('active');
$(this).text('Click to Expand');
}else{
$('ul.menu li ul').slideToggle('normal');
$('ul.menu li a').addClass('active');
$(this).text('Click to Collapse');
}
}
);
不隶属于 StackOverflow