Ich bin ein totaler Anfänger, also entschuldige meine Unfähigkeit, eine offensichtliche Lösung zu sehen (wenn es eine gibt). Das heißt, ich habe das Interweb nach einer Antwort auf dieses Thema durchforstet und bin nur auf die gleiche Frage gestoßen. Was ich bis jetzt gearbeitet habe: Mit dem, was ich bei http://www.tobypitman.com/multiple-collapsable-panels-with-cookies/ gefunden habe, habe ich es geschafft, mehrere Container zwischen display:block und display:none umzuschalten, und ich setze Cookies mit Klaus Hartls cookie.js.jQuery toggle mit cookies: Wie kann man standardmäßig den Zustand "collapsed" erreichen und bleibt zugänglich?
Alles funktioniert hervorragend! Abgesehen davon, dass der Ausgangszustand der Wechselcontainer geschlossen werden soll. Ich würde das gerne erreichen, ohne display:none direkt im CSS zu haben, damit der Inhalt mit JS off zugänglich bleibt. Ich bin kein Programmierer, und meine brutale Methode, Dinge hier und da zu ändern, bis etwas passiert, ist nicht gerade einschneidend. Ich habe die HTML, CSS und jQuery alle unten enthalten - die einzige Sache, die in meinem Beispiel fehlen wird, ist das CSS-Bild Sprite für die <h6>, die als Auslöser dient.
Toggle with cookie
<style>
.toggle-wrapper {
overflow:hidden;
display:block;
}
.toggle-wrapper .toggle-container {
position:relative;
overflow: hidden;
}
.toggle-wrapper h6.trigger {
background: transparent url(images/trigger-sprite.png) no-repeat left top;/*sprite is 15x30px - plus sign on top, minus on bottom*/
height: 15px;/*half of sprite's height*/
cursor:pointer;
padding:0 0 0 16px;
margin:0;
}
.toggle-wrapper h6.active {
background-position: left bottom;/*this is the open state, showing the minus sign part of sprite*/
padding:0 0 0 16px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
/**
* Get the value of a cookie with the given key.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String key The key of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/[email protected]
*/
jQuery.cookie = function (key, value, options) {
// key and value given, set cookie...
if (arguments.length > 1 && (value === null || typeof value !== "object")) {
options = jQuery.extend({}, options);
if (value === null) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? String(value) : encodeURIComponent(String(value)),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|;)' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
// http://www.tobypitman.com/multiple-collapsable-panels-with-cookies/
$(document).ready(function(){
$("div.toggle-wrapper h6").addClass("active");
var l = $('div.toggle-wrapper h6').length;
var panel = $("div.toggle-wrapper div.toggle-container");
for (c=0;c<=l;c++){
var cvalue = $.cookie('panel' + c);
if (cvalue == 'closed' + c) {
$(panel).eq(c).css({display:"none"});
$(panel).eq(c).prev().removeClass('active').addClass('inactive');
};
};
$("div.toggle-wrapper h6.active").toggle(
function() {
var num = $("div.toggle-wrapper h6").index(this);
var cookieName = 'panel' + num;
var cookieValue = 'closed' + num;
$(this).next("div.toggle-container").slideUp(500);
$(this).removeClass('active');
$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });
},
function() {
var num = $("div.toggle-wrapper h6").index(this);
var cookieName = 'panel' + num;
$(this).next("div.toggle-container").slideDown(500);
$(this).addClass("active");
$.cookie(cookieName, null, { path: '/', expires: 10 });
}
);
$("div.toggle-wrapper h6.inactive").toggle(
function() {
var num = $("div.toggle-wrapper h6").index(this);
var cookieName = 'panel' + num;
$(this).next("div.toggle-container").slideDown(500);
$(this).addClass("active");
$(this).removeClass('inactive');
$.cookie(cookieName, null, { path: '/', expires: 10 });
},
function() {
var num = $("div.toggle-wrapper h6").index(this);
var cookieName = 'panel' + num;
var cookieValue = 'closed' + num;
$(this).next("div.toggle-container").slideUp(500);
$(this).removeClass('active');
$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });
}
);
});
</script>
<div class="toggle-wrapper">
<h6 class="trigger">Trigger 1</h6>
<div class="toggle-container">
<p>Stuff goes inside of here</p>
<p>More stuff</p>
<p>More even</p>
</div>
</div>
<div class="toggle-wrapper">
<h6 class="trigger">Trigger 2</h6>
<div class="toggle-container">
<p>Stuff goes inside of here</p>
<p>More stuff</p>
<p>More even</p>
</div>
</div>
<div class="toggle-wrapper">
<h6 class="trigger">Trigger 3</h6>
<div class="toggle-container">
<p>Stuff goes inside of here</p>
<p>More stuff</p>
<p>More even</p>
</div>
</div>
Was erwarten Sie mit JS aus? –
Er ist darauf angewiesen, dass JS kollabierte Panels für sehende Benutzer anzeigt. aber er möchte, dass der Inhalt dieser Panels für Screenreader-Benutzer zugänglich bleibt. Wenn der Anfangszustand eines Panels "display: none" lautet und der Benutzer ein Screenreader-Benutzer ist und AND JS deaktiviert ist, bleibt dem blinden Benutzer keine Möglichkeit zum Öffnen der Panels. –
Für das, was es wert ist, hat die Seite, die Sie verlinken, schreckliche * Tastatur * Zugänglichkeit; Als sehbehinderter Tastaturbenutzer kann ich überhaupt nicht sagen, wo der Fokus liegt, während ich herumlaufe. Die style.css hat die gefürchtete Regel {outline-style: none}, die das Standardfocus-Rechteck entfernt - und nicht durch eine Alternative ersetzt - bitte kopieren Sie diesen Fehler nicht! Entweder lassen Sie den Umriss-Stil alleine, oder stellen Sie Ihre eigene Hervorhebung für fokussierte Gegenstände zur Verfügung.Stellen Sie außerdem sicher, dass Sie die Tastaturparität bereitstellen. Wenn Sie bei einem Mauszeiger einen Mauszeiger verwenden, z. – BrendanMcK