JQuery Akkordeon nicht removingClass und nicht tauschen ihre Expand Text für Collapse
Frage
Dank @ifaour für viele seiner Hilfe! Dieses Skript enthält:
- JQuery Akkordeon mit ungeordneten Listen.
- Aktive und inaktive Zustände mit Makeln Kugel Pfeil Bilder
- Alle erweitern / Alles schließen, dass bei Swaps seinen Text.
- Equal Höhe Spalten, die erweitern oder reduzieren, wenn das Akkordeon ausdehnt und kollabiert
Sie können eine Demo sehen hier 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();
});
Danke !!
Lösung
Here's my try:
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();});
Example link.
Since the .swap
link is common for all, no need to have it inside the each
loop.
Andere Tipps
You're pretty close, the problem exists in where you're using .text() to set the link.
$(this).text($(this).text().prev() == 'Click to Collapse');
That line of code attempts to set the text on $(this) with the return of $(this).text().prev() == 'Click to Collapse');
$(this).text()
returns the string "Click to Collapse".
.prev()
is not a valid function on strings, thus will result in a javascript error.
What you want to do is $(this).text("Click to Expand");
The end result will be something like this:
$('.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');
}
}
);
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow