提高可访问性：定制accordionjquery和HTML？

Question

引言：

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

该主题提供了一个基于jQuery 1.11.0的手风琴短码。

问题：

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

目标：

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

问题是：

我无法获得额外的<代码>

我试图解决这个问题：

我在打开的jQuery函数中添加了一个名为“closer”的变量，当DIV元素与CSS Class一起使用时，它似乎可以工作。关闭标题嵌套在类中。切换标题。Accordion函数的一个片段：

/*  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");
                }
....
....

事实上，具有类的DIV元素。关闭标题的行为与关闭标题的行为完全相同。在类中嵌套时切换标题标题。切换标题，这很好地表明我走对了方向。

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

我认为jQuery脚本似乎无法找到类为的DIV元素。当标题嵌套在DIV元素内以外的任何位置时，关闭标题。切换标题。

注意：请参见JSBin示例中标题“受托人角色描述”以查看此嵌套相关点的演示。

我的问题是：

如何通过单击“关闭”调用用于切换每个菜单项的相同函数，以及如何通过放置

JSBin示例：

我有一个JSBin示例：http://jsbin.com/yonox/2/edit-您会注意到一个id为的DIV元素

有人能演示一下我如何使这个元素以与“Title/-”元素相同的方式切换项目，因为这个元素最好位于每个手风琴项目的底部。

供我们参考，以下是手风琴菜单的原始短代码片段：

[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]




Answer 1

对于这类问题有很多解决方案，我想列出的一个解决方案就是这样

在您冗长的切换内容div中添加一个关闭我div：

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

注意：请确保您已经在切换内容div中插入了这个关闭我div，并且必须是切换内容div的最后一个孩子。

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

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

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