我不熟悉JS,但我希望有人可以通过以编程方式将aria-expanded和aria-hidden属性设置为现有的JS来向我展示如何使现有的展开/折叠JS菜单可访问。注意:我无法编辑菜单的HTML。谢谢。
// JavaScript Document
imgout=new Image(9,9);
imgin=new Image(9,9);
/////////////////BEGIN USER EDITABLE///////////////////////////////
imgout.src="images/u.gif";
imgin.src="images/d.gif";
///////////////END USER EDITABLE///////////////////////////////////
//this switches expand collapse icons
function filter(imagename,objectsrc){
if (document.images){
document.images[imagename].src=eval(objectsrc+".src");
}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
document.getElementById(id).style.display = 'block';
filter(("img"+id),'imgin');
} else {
filter(("img"+id),'imgout');
document.getElementById(id).style.display = 'none';
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
filter(("img"+id),'imgin');
} else {
filter(("img"+id),'imgout');
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
filter(("img"+id),'imgout');
document.all.id.style.display = 'none';
}
}
}
}
<!-- HTML Source -->
<div class="box" >
<div class="boxHead">
<h2><a href="index.php">First Responders</a></h2>
</div>
<ul class="sidebarNav">
<li class="order"><a href="order.html">Order FREE Materials</a></li>
<li class="safetyinfo"><a href="safety/index.html">Advanced Safety Info</a>
<ul>
<li><a href="safety/overhead.html" class="overhead">Overhead Line Safety</a></li>
<li><a href="safety/downed.html" class="downed">Downed Power lines</a></li>
<li><a href="safety/carpole.html" class="carpole">Car/Pole Accidents</a></li>
<li><a href="safety/substation.html" class="substation">Substation Fires</a></li>
</ul>
</li>
<li class="training"><a href="presentation/index.html">Presentation Tools</a> </li>
</ul>
</div>