提高可访问性：自定义 Accordion jQuery 和 HTML？

Posted 2023-05-09

【中文标题】提高可访问性：自定义 Accordion jQuery 和 HTML？

【英文标题】：Improving Accessibility: Customising Accordion jQuery and HTML?

【发布时间】：2014-08-01 23:32:37

【问题描述】：

简介：

我正在通过本地安装的 WordPress 使用高级响应主题。

The Theme 提供了一个基于 jQuery 1.11.0 的 Accordion ShortCode。

问题：

使用我在 ShortCode 中添加的 12 点列表，移动用户需要做出一些向上滚动手势才能到达页面顶部以关闭冗长的 Accordion 项目，以便腾出空间来查看其他手风琴导航选项。

目标：

为了提高可访问性，我想通过在每个冗长的 Accordion 项目的底部添加一个“CLOSE”链接来自定义 html 和 jQuery。

问题：

当放置在每个 Accordion 项目的底部时，我无法让额外的 <div id="close-title" class="close-title">CLOSE ^^</div> 发挥作用。

我尝试解决这个问题：

我在打开的 jQuery 函数中添加了一个名为“closer”的变量，当具有 CSS 类 .close-title 的 DIV 元素嵌套在类 .toggle-title 中时，该变量似乎可以工作。来自 Accordion 函数的 sn-p：

/*  ACCORDION
/*====================================================================*/

    (function($)

        $('.accordion').each(function()
            var $this = $(this),

                title = $this.find('.toggle-title'),
                closer =  $this.find('.close-title'),
                content =  $this.find('.toggle-content');


                if($this.hasClass('collapsible-yes'))
                    $this.find('.active:not(:first)').removeClass("active");
                
....
....

事实上，当嵌套在 .toggle-title 类中时，具有 .close-title 类的 DIV 元素的行为与 .toggle-title-header 完全相同，这很好地表明我走在正确的轨道上。

当我说“行为”时，我指的是标题选项卡的功能方式，它们的“+”和“-”是打开和关闭状态的指示器，每个手风琴项打开和关闭 on点击。

我相信，当它嵌套在 DIV 元素 .toggle-title 以外的任何位置时，jQuery 脚本似乎无法找到类 .close-title 的 DIV 元素。

注意：请参阅 JSBin 示例中的 Accordion with Title: 'Trustee role description' 以查看此嵌套相关点的演示。

我的问题：

我如何调用通过单击“关闭”来切换每个菜单项的相同功能，以及如何通过将<div id="close-title" class="close-title">CLOSE ^^</div> 放在手风琴项的底部来执行此操作？

JSBin 示例：

我有这个 JSBin 示例：http://jsbin.com/yonox/2/edit - 你会注意到一个带有 id 和类的 DIV 元素：.close-title。嵌套在评论 <!--START ACCORDION TAB 3--> 的顶部和底部。放在顶部的 DIV 工作，放在底部的 DIV 不起作用。

鉴于此元素应理想地放置在每个 Accordion 项目的底部，有人可以演示我如何使此元素以与“标题 +/-”元素相同的方式切换项目。

供我们参考，这里是手风琴菜单原始短代码的 sn-p：

[accordion collapsible="yes no"]

[toggle title="What do I need to know if I’m thinking of becoming a trustee?" open="no"]

Charity Trustees are responsible for controlling the management and administration of the charity. In general terms trustees are responsible for the proper administration of the charity in accordance with the law, and its trusts as set out in the governing document.

Their overriding duty is to pursue the objectives of the charity and ensure that income and property are used exclusively for these objectives.

The general duties of a trustee are set out in the common law and statute.

[/toggle]

【参考方案1】：

这类问题有很多解决方案， 我试图列出的解决方案之一， 就这样吧

在冗长的切换内容 div 中添加一个 close me div：

<div class="close-me" style="color:red;">Close Me ^ </div>    

注意：请确保您已将这个 close me div 插入到您的切换内容 div 中，并且必须是切换内容 div 的最后一个子项。

并在您的 java 脚本文件末尾添加以下内容：

$('.close-me').click(function()
  $(this).parent('div.toggle-content').prev().click();
);

我希望这个解决方案可以解决您的问题。

【讨论】：

我刚刚在上面的 JSBin 中进行了测试，并且可以正常工作。我将您添加的内容添加到每个切换内容 div 的末尾，Close Me ^ 也像我原来的手风琴标题和 +/- 一样切换。下一篇：我会在直播网站上试试这个。