Jquery fisarmonica non removingClass e non scambiare il suo testo Espandi per Collapse
Domanda
Grazie ad @ifaour per un sacco di suo aiuto! Questo script include:
- Jquery fisarmonica usando liste non ordinate.
- Stati attive e inattivi con commutando immagini proiettile freccia
- Espandi tutto / Comprimi tutto che gli swap il suo testo.
- Pari colonne altezza che si espandono e collassano quando la fisarmonica espande e si comprime
È possibile visualizzare una demo qui 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();
});
Grazie !!
Soluzione
Ecco la mia prova:
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();});
Esempio link .
Dal momento che il link .swap
è comune per tutti, non c'è bisogno di farlo all'interno del ciclo each
.
Altri suggerimenti
Si sta abbastanza vicino, il problema esiste in cui si sta utilizzando .text () per impostare il collegamento.
$(this).text($(this).text().prev() == 'Click to Collapse');
Questa linea di tentativi di codice per impostare il testo su $ (this) con il ritorno di $(this).text().prev() == 'Click to Collapse');
$(this).text()
restituisce la stringa "Click to Collapse".
.prev()
non è una funzione valida sulle stringhe, in tal modo si tradurrà in un errore di javascript.
Che cosa si vuole fare è $(this).text("Click to Expand");
Il risultato finale sarà simile a questo:
$('.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');
}
}
);