【发布时间】：2010-11-23 16:00:44
【问题描述】：
我是一个完全的初学者，所以请原谅我无法看到一个明显的解决方案（如果有的话）。也就是说，我已经在互联网上搜索了这个问题的答案，但只遇到了同样的问题。到目前为止我所做的工作：使用我在http://www.tobypitman.com/multiple-collapsable-panels-with-cookies/ 找到的内容，我设法让多个容器在display:block 和display:none 之间切换，并且我正在使用Klaus Hartl 的cookie.js 设置cookie。
一切都非常好！除了我想要关闭切换容器的初始状态。我真的很想在没有任何display:none 的情况下直接在 CSS 中完成此操作，因此在关闭 JS 的情况下仍可访问内容。我不是程序员，我在这里和那里改变事物直到发生某些事情的蛮力方法并没有完全削减它。我在下面包含了 HTML、CSS 和 jQuery - 我的示例中唯一缺少的是用作触发器的 <h6> 的 CSS 图像精灵。
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/klaus.hartl@stilbuero.de
*/
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>
触发器 1
东西进去了
更多的东西
更均匀
触发器 2
东西进去了
更多的东西
更均匀
触发器 3
东西进去了
更多的东西
更均匀
【问题讨论】：
-
关闭 JS 后你希望发生什么？
-
他依靠 JS 向有视力的用户展示折叠的面板；但他希望屏幕阅读器用户仍然可以访问这些面板的内容。如果面板的初始状态是
display: none，并且用户是屏幕阅读器用户，并且JS被禁用，那么盲人用户将无法打开面板。 -
不管怎样，您链接到的页面的 keyboard 可访问性很差；作为一个有视力的键盘用户，当我四处移动时，我根本无法分辨焦点在哪里。 style.css 有一个可怕的 {outline-style:none} 规则，它删除了默认的焦点矩形 - 并且没有用替代品替换它 - 请不要复制这个错误！要么单独保留大纲样式，要么为重点项目提供自己的亮点。此外，请确保您提供键盘奇偶校验 - 如果您在鼠标悬停时执行某些操作（例如突出显示），请考虑在键盘焦点上也执行等效操作。
-
这里真正的问题不在于屏幕阅读器；但是如何使页面可供 任何 类禁用 JS 的用户访问，无论他们是使用屏幕阅读器还是出于其他原因禁用它。最近的调查显示，大约 98% 的屏幕阅读器确实使用 JS；所以不要假设禁用 JS 意味着它是屏幕阅读器用户；它可能是一个有视力的用户，由于其他原因禁用了 JS。请参阅brucelawson.co.uk/2011/javascript-and-screenreaders 了解一些有趣的上下文。
标签： jquery cookies jquery-plugins accessibility toggle